Component Basics

The majority of components provided by this library follow a similar pattern which has been condensed into this section rather than repeated throughout each component.

Prop types

All component props are exported as types under the component's name prefixed with Reactivesearch and suffixed with Props, for example the Filter component and ReactivesearchFilterProps.

import { Filter, ReactivesearchFilterProps } from "@usereactify/search"

Render props

All of the visual components (eg, components that render visual content) use one or more "render props" for customising the visual content, for simple components such as ResultStateProvider this is simply called render.

<ResultStateProvider
  render={(renderProps) => ...}
/>

For more complex components which render many different types of content such as Filter there are several render props.

<Filter
  renderFilterList={(renderProps) => ...}
  ...
/>

There are many alternative ways to get the prop types for these components but for now this is the recommended approach.

Last updated