# <Feature />

The `Feature` component only displays its children if the feature is "on" based on the data fed to its `FeatureProvider`.

## How to use

Initialize the `FeatureProvider` with some relevant data by passing it an object with `{featureName => Boolean}` data via `value` prop.

The `FeatureProvider` should be high on your component tree so the `Feature` components can receive its context.

```jsx
const App = () => {
  const features = {
    dandb: false,
    equifax: false,
    experian: true,
  }
  return (
    <FeatureProvider value={features}>
      <MyComponent />
    </FeatureProvider>
  )
}
```

Then, use the feature component by passing it the name of the feature via `name` prop.

```jsx
<MyComponent>
  <Feature name="experian">
    <p>Experian Report...</p>
  </Feature>
  ...other things
</MyComponent>
```

If the Provider data has `{experian: true}` then the `Feature` component will render its children, if not, it'll return `null`.

If the feautre name the `Feature` component is looking for does not exist in the Provider data, the component also returns `null`.

To facilitate testing the UI, you can override Provider data by appending query params to the url, e.g. `http://navlocal.io:5000/my-page?experian=false`.
To enable this functionality, you need to pass in a `search` string as the `search` prop.

```jsx
const MyComponent = () => {
  const { search } = useLocation() // '?experian=false'
  return (
    <>
      <Feature name="experian" search={search}>
        <p>Experian Report...</p>
      </Feature>
    </>
  )
}
```