{"id":18378263,"url":"https://github.com/tyom/storybook-react-context","last_synced_at":"2026-03-02T21:09:20.789Z","repository":{"id":253649067,"uuid":"843545031","full_name":"tyom/storybook-react-context","owner":"tyom","description":"Set and control React context in Storybook stories","archived":false,"fork":false,"pushed_at":"2025-11-22T16:31:50.000Z","size":340,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-30T17:37:32.674Z","etag":null,"topics":["context-api","react","storybook-addon"],"latest_commit_sha":null,"homepage":"https://tyom.github.io/storybook-react-context/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-16T18:49:10.000Z","updated_at":"2025-11-22T16:31:25.000Z","dependencies_parsed_at":"2024-08-30T00:02:34.875Z","dependency_job_id":null,"html_url":"https://github.com/tyom/storybook-react-context","commit_stats":null,"previous_names":["tyom/storybook-react-context"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/tyom/storybook-react-context","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fstorybook-react-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fstorybook-react-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fstorybook-react-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fstorybook-react-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyom","download_url":"https://codeload.github.com/tyom/storybook-react-context/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fstorybook-react-context/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30020346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T20:56:45.032Z","status":"ssl_error","status_checked_at":"2026-03-02T20:51:18.182Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","react","storybook-addon"],"created_at":"2024-11-06T00:32:37.921Z","updated_at":"2026-03-02T21:09:20.778Z","avatar_url":"https://github.com/tyom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# storybook-react-context\n\nManipulate React context inside Storybook. Read state and dispatch updates from outside of React component.\n\n[![React examples](https://img.shields.io/badge/react-blueviolet?style=for-the-badge\u0026logo=storybook\u0026label=examples)](https://tyom.github.io/storybook-react-context/?path=/story/storybook-react-context)\n\n## Install\n\n```\nnpm install -D storybook-react-context\n```\n\n## Usage\n\nAdd `withReactContext` decorator where needed, per component or globally.\n\n```js\nimport { withReactContext } from 'storybook-react-context';\n\nexport default {\n  title: 'some story',\n  decorators: [withReactContext],\n};\n```\n\nThe decorator can also be preconfigured for all stories in the module:\n\n```js\nexport default {\n  title: 'some story',\n  decorators: [\n    withReactContext({\n      context: ExampleContext,\n      contextValue: { authenticated: false },\n    }),\n  ],\n};\n```\n\nor via parameters:\n\n```js\nexport default {\n  title: 'some story',\n  decorators: [withReactContext],\n  parameters: {\n    reactContext: {\n      context: ExampleContext,\n      contextValue: { authenticated: false },\n    },\n  },\n};\n```\n\nNB: Avoid using the same `context` parameter for `reactContext` as in the default export of the story. This will cause a\nmaximum call stack size exceeded error.\n\n### Options\n\n`withReactContext` takes an argument which is an object with the following optional properties:\n\n- `context` - The context returned by `React.createContext` to provide for story's components\n- `contextValue` - the value to use for the provider value. If a function is provided, it will be called with the story context as the first argument.\n  The function can return React hooks such as `useState` of `useReducer` to manage the state in the story definition.\n- `contexts` - an array of context options (an object with `context` and `contextValue` properties) to provide multiple contexts for story's components\n\nThe decorator options can also be set in story parameters using `reactContext` key:\n\n```js\nexport default {\n  title: 'My Component',\n  component: MyComponent,\n  decorators: [withReactContext],\n};\n\n// single provider is used for `MyComponent`\nconst SomeStory = {\n  parameters: {\n    reactContext: {\n      context: FirstContext,\n      contextValue: { someContextValue: true },\n    },\n  },\n};\n\n// multiple provider are used wrapping the `MyComponent` component\nconst AnotherStory = {\n  parameters: {\n    reactContext: {\n      contexts: [\n        {\n          context: FirstContext,\n          contextValue: { someContextValue: true },\n        },\n        {\n          context: SecondContext,\n          contextValue: [1, 2, 3],\n        },\n      ],\n    },\n  },\n};\n```\n\nThe component or the result of the render function will be wrapped with providers setting the value to the result of `contextValue`.\nThe context values are passed back to the story render function in the story context (second argument) in `reactContext` property.\nThe property contains two properties: `values` and `value`. The `values` property is an array of all values provided for each context.\nThe `value` property returns the last value and is useful for single contexts.\n\n```js\nimport * as React from 'react';\nimport { withReactContext } from 'storybook-react-context';\n\nconst reducer = (state, action) =\u003e ({ ...state, ...action });\n\n// the values are arrays as we expect a setter/dispatch function as second argument in some of the stories\nconst FirstContext = React.createContext([{ text: 'Initial text' }]);\nconst SecondContext = React.createContext(['black']);\n\nconst MyComponent = () =\u003e {\n  const [textState] = React.useContext(FirstContext);\n  const [colorState] = React.useContext(SecondContext);\n\n  return \u003cdiv style={{ color: colorState }}\u003e{textState?.text}\u003c/div\u003e;\n};\n\nexport default {\n  title: 'My Component',\n  component: MyComponent,\n  decorators: [withReactContext],\n};\n\n// access the reducer dispatch function set in the contextValue parameter from the story\nexport const FirstStory = {\n  render: (_, { reactContext }) =\u003e {\n    const [, dispatch] = reactContext.value;\n    return (\n      \u003c\u003e\n        \u003cMyComponent /\u003e\n        \u003cbutton onClick={() =\u003e dispatch({ text: 'Changed text' })}\u003eChange text\u003c/button\u003e\n      \u003c/\u003e\n    );\n  },\n  parameters: {\n    reactContext: {\n      context: FirstContext,\n      contextValue: () =\u003e React.useReducer(reducer, { text: 'Initial text' }),\n    },\n  },\n};\n\n// apply multiple contexts and use `reactContext.values` to access the setters from the story\nexport const SecondStory = {\n  render: (_, { reactContext }) =\u003e {\n    const [, [color, setFirstContextValue]] = reactContext.values;\n    const colors = ['red', 'orange', 'blue', 'green', 'purple'];\n    return (\n      \u003c\u003e\n        \u003cMyComponent /\u003e\n        \u003cp\u003eSelected color: {color}\u003c/p\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            const randomColor = colors[Math.floor(Math.random() * colors.length)];\n            return setFirstContextValue(randomColor);\n          }}\n        \u003e\n          Toggle Value\n        \u003c/button\u003e\n      \u003c/\u003e\n    );\n  },\n  parameters: {\n    reactContext: {\n      contexts: [\n        {\n          context: FirstContext,\n          contextValue: [{ text: 'New text' }],\n        },\n        {\n          context: SecondContext,\n          contextValue: () =\u003e React.useState(),\n        },\n      ],\n    },\n  },\n};\n\n// use story controls (args) to set the context value\nexport const ThirdStory = {\n  args: { text: 'Initial text' },\n  parameters: {\n    reactContext: {\n      context: FirstContext,\n      contextValue: ({ args }) =\u003e [\n        {\n          text: args.text,\n        },\n      ],\n    },\n  },\n};\n```\n\nThe `contextValue` function provides the story context as its first argument. This gives access to story args and other\ncontext values. In addition, the [useArgs hook](https://storybook.js.org/docs/writing-stories/args#setting-args-from-within-a-story)\nfrom `@storybook/preview-api` is exposed to access and update the args within the story.\n\nSee the [example stories](https://github.com/tyom/storybook-react-context/tree/main/example/storybook-react-context.stories.tsx) for more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyom%2Fstorybook-react-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyom%2Fstorybook-react-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyom%2Fstorybook-react-context/lists"}