storybook-react-context
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    storybook-react-context

    Manipulate React context inside Storybook. Read state and dispatch updates from outside of React component.

    React examples

    Install

    npm install -D storybook-react-context
    

    Usage

    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 },
        }),
      ],
    };

    Options

    withReactContext takes an argument which is an object with the following optional properties:

    • Context - The context returned by React.createContext to provide for story's components
    • reducer(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
    };

    Install

    npm i storybook-react-context

    DownloadsWeekly Downloads

    12,282

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    8.35 kB

    Total Files

    7

    Last publish

    Collaborators

    • tyom