https://github.com/kit-data-manager/react-search-component
All-in-one component for rendering an elastic search UI for searching anything. Includes an interactive graph of related records and unique identifier resolving.
https://github.com/kit-data-manager/react-search-component
react-component
Last synced: 3 months ago
JSON representation
All-in-one component for rendering an elastic search UI for searching anything. Includes an interactive graph of related records and unique identifier resolving.
- Host: GitHub
- URL: https://github.com/kit-data-manager/react-search-component
- Owner: kit-data-manager
- License: apache-2.0
- Created: 2025-01-23T15:15:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-21T13:58:34.000Z (5 months ago)
- Last Synced: 2025-12-30T18:11:31.043Z (5 months ago)
- Topics: react-component
- Language: TypeScript
- Homepage: https://kit-data-manager.github.io/react-search-component/
- Size: 1.84 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Citation: CITATION.cff
- Codemeta: codemeta.json
Awesome Lists containing this project
README
# react-search-component
[](https://www.npmjs.com/package/@kit-data-manager/react-search-component)
[](https://github.com/kit-data-manager/react-search-component/actions/workflows/build.yml)
All-in-one, highly configurable React component for rendering an elastic search UI based on the provided configuration. Includes
an **interactive graph** of related records and **unique identifier resolving**.
> **Fair Digital Objects**\
> This component includes some useful (optional) features for FAIR DOs
This is an ESM Module intended for use in modern React applications. Make sure your bundler supports importing CSS files in JavaScript/TypeScript. Next.js is supported out of the box.
## Installation
```bash
npm install @kit-data-manager/react-search-component
```
## Docs
[Visit the Storybook](https://kit-data-manager.github.io/react-search-component/?path=/docs/getting-started--docs) for examples and some documentation. For more documentation, consult the TypeScript typings.
## Quick Start
Refer to the Getting Started Guide in the Storybook
## Customization
### Result View
Most notably, the result view component should be customized. A `GenericResultView` Component is provided that should work
for some scenarious out of the box. Otherwise, you should implement your own Result View in React. For a starting point, feel
free to copy the code of `GenericResultView.ts`, though most of the customization should be thrown out to make it more lightweight.
### Generic Result View
Each field of the generic result view can be mapped to a field in the elastic search index. Additionally, you can specify multiple
tags from multiple different fields in the elastic index. Take a look at the Storybook for an example.
To map (parts of) the result before feeding it to the `GenericResultView`, you can define you own component that itself
uses the `GenericResultView` with modified data:
```typescript jsx
import { useMemo } from "react"
import { GenericResultView, ResultViewProps } from "@kit-data-manager/react-search-component"
export function MyResultView(props: ResultViewProps) {
const mappedResult = useMemo(() => {
const copy = structuredClone(props.result)
copy.someProperty = copy.something + copy.somethingElse
return copy
}, [props.result])
return
}
```
Then simply pass your custom component to the search component.
### Styling
Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS.
More information can be found in the Storybook.
## Contributing
Feedback and issue reports are welcome, simply [create an issue](https://github.com/kit-data-manager/react-search-component/issues/new) here on GitHub.
### Development
Install dependencies with
```bash
npm install
```
Run development server with
```bash
npm run storybook:dev
```