bbc/simorgh

import { Meta } from '@storybook/blocks';

<Meta title="hooks/useToggle" />

# useToggle Hook

### Feature Toggles

A description of how feature toggles work can be found in the toggles readme [here](https://github.com/bbc/simorgh/blob/latest/src/app/lib/README.md)

### Using the useToggle Hook

```jsx
import useToggle from './useToggle';

const Component = () => {
    const { enabled } = useToggle('foo')

    return enabled ? <h1>toggle enabled</h1> : <p>toggle disabled</p>
}

export default Component;
```

### Testing

When writing unit tests for components that use the `useToggle` hook, you should wrap the component in a `ToggleContextProvider`. Then pass to it a stub for the toggles as shown below in `defaultToggles`. This will ensure that the component's unit test is not impacted by changes in the actual toggle values.

```jsx
const toggles = {
  myFeature: {
    enabled: true,
  },
};

<ToggleContextProvider toggles={toggles}>
  <YourComponent service="pidgin" />
</ToggleContextProvider>
```