ส่วนประกอบ UI สำหรับ React + Elasticsearch สร้างแอปพลิเคชันการค้นหาโดยใช้ส่วนประกอบที่ประกาศ
เอกสารและการสาธิตที่สามารถเล่นได้ที่นี่
const MySearchComponent = ( ) => (
< Elasticsearch url = "http://example.org/search" >
< SearchBox id = "mainSearch" fields = { [ "title" ] } />
< Facet id = "actors" fields = { [ "actors" ] } />
< Facet id = "releasedYear" fields = { [ "releasedYear" ] } />
< Results
id = "results"
items = { data =>
// Map on result hits and display whatever you want.
data . map ( item => < MyCardItem key = { item . _id } source = { item . _source } /> )
}
/>
</ Elasticsearch >
) ; npm i react-elasticsearch
yarn add react-elasticsearch
คุณสามารถทดสอบส่วนประกอบด้วยหนังสือนิทาน (ตัวอย่าง 20+)
npm run storybook
เราเริ่มสร้างประสบการณ์การค้นหาของแพลตฟอร์มเปิดมรดกทางวัฒนธรรมของฝรั่งเศสด้วย ReactiveSearch ซึ่งเป็นส่วนประกอบ UI ที่รู้จักกันดี lib สำหรับ React หลังจากผ่านไปหลายสัปดาห์เรารู้ว่าเราใช้เวลามากในการปรับแต่งและแฮ็ค lib; เราเขียนใหม่เกือบทุกองค์ประกอบด้วยตัวเอง เราเปิดปัญหาและดึงคำขอในที่เก็บข้อมูล แต่ดูเหมือนว่า LIB นั้นติดอยู่เล็กน้อยในกระบวนการเขียนใหม่ เราพบว่าเราต้องการ LIB ง่าย ๆ ที่สามารถขยายได้อย่างง่ายดายด้วย API ที่คล้ายกันเราสร้างอันนี้ LIB นี้มีคุณสมบัติน้อยกว่าคนอื่น ๆ มันไม่ได้เป็นคู่แข่งที่ดี แต่เนื่องจากมันช่วยให้เราสร้างประสบการณ์การค้นหาจึงได้รับการปล่อยตัว หวังว่ามันจะช่วยคุณได้!
เปิดปัญหาและประชาสัมพันธ์ที่นี่: https://github.com/betagouv/react-elasticsearch