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 suffixed with Props, for example the Filter component and FilterProps.

import { Filter, FilterProps } 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 ClearAll this is simply called render.

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

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

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

The render props all expect a React functional component to be provided, you can write this as an anonymous function as seen in the examples above or you can provide it a named React functional component as seen in other examples within this documentation and below

const ExampleClearAll: React.FC = () => ...

<ClearAll
  render={ExampleClearAll}
/>

However, when using named React functional components as seen in the example above its not immediately clear where to get the prop types from, currently we recommend the following pattern which extracts the prop types from the relevant render prop itself.

import { ClearAllProps } from "@usereactify/search";

type ExampleClearAllProps = React.ComponentProps<
  NonNullable<ClearAllProps["render"]>
>;

const ExampleClearAll: React.FC<ExampleClearAllProps> = (props) => {
  return <a onClick={props.clearAll}>{"Clear All"}</a>;
};

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