# 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](https://search.docs.reactify.com.au/4/components/filter) component and **ReactivesearchFilterProps**.

```tsx
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](https://search.docs.reactify.com.au/4/components/resultstateprovider) this is simply called **render**.

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

For more complex components which render many different types of content such as [Filter](https://search.docs.reactify.com.au/4/components/filter) there are several render props.

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

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