Manipulate React context inside Storybook. Read state and dispatch updates from outside of React component.
npm install -D storybook-react-context
Add withReactContext
decorator where needed, per component or globally.
import { withReactContext } from 'storybook-react-context';
export default {
title: 'some story',
decorators: [withReactContext],
};
The decorator can also be preconfigured for all stories in the module:
export default {
title: 'some story',
decorators: [
withReactContext({
Context: ExampleContext,
initialState: { authenticated: false },
}),
],
};
withReactContext
takes an argument which is an object with the following optional properties:
Context
- The context returned byReact.createContext
to provide for story's componentsreducer(state, action)
- custom reducer to produce the provider value or;useProviderValue(state, args)
- a function (hook) to be used to derive the provider value (provides story args as second argument to link with Storybook Controls)initialState
- the initial state to use for the provider value
The decorator options can also be se set in story parameters using reactContext
key:
someComponent.parameters = {
reactContext: {
initialState: {
defaultValue: true,
},
reducer: (state, action) => ({ ...state, action })
}
};
Component will be wrapped with another component which uses the context hook and returns
it to the story via story context as the result of React.useReducer
with reducer
function and initialState
.
The useProviderValue
hook can be used to link the context with Storybook Controls.
import { withReactContext } from 'storybook-react-context';
export const myStory = ({ myValue }) => (
<button onClick={() => dispatch({ text: 'Changed' })}>{state.text}</button>
);
myStory.args = {
myValue: true,
}
myStory.decorators = [withReactContext];
myStory.parameters.reactContextState = {
useProviderValue: (state, args) => args
};