{"id":13752961,"url":"https://github.com/dump247/storybook-state","last_synced_at":"2025-05-09T20:34:38.949Z","repository":{"id":57110023,"uuid":"112291120","full_name":"dump247/storybook-state","owner":"dump247","description":"Manage component state in React storybook.","archived":true,"fork":false,"pushed_at":"2020-10-21T21:02:02.000Z","size":1322,"stargazers_count":76,"open_issues_count":17,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T02:01:59.302Z","etag":null,"topics":["react","reactjs","storybook"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/dump247.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-28T05:40:44.000Z","updated_at":"2024-02-05T01:29:51.000Z","dependencies_parsed_at":"2022-08-20T20:20:18.666Z","dependency_job_id":null,"html_url":"https://github.com/dump247/storybook-state","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dump247%2Fstorybook-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dump247%2Fstorybook-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dump247%2Fstorybook-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dump247%2Fstorybook-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dump247","download_url":"https://codeload.github.com/dump247/storybook-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253321801,"owners_count":21890466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react","reactjs","storybook"],"created_at":"2024-08-03T09:01:13.512Z","updated_at":"2025-05-09T20:34:35.045Z","avatar_url":"https://github.com/dump247.png","language":"JavaScript","funding_links":[],"categories":["Community Addons"],"sub_categories":[],"readme":"# Storybook State\n\n*This project is no longer being maintained. The recommended replacement is the useState hook in React 16+.*\n\nAn extension for [Storybook](https://storybook.js.org/) that manages the state of a stateless\ncomponent. This makes it easier to write stories for stateless components.\n\n## Getting Started\n\n### Add @dump247/storybook\n\n```sh\nnpm install --save-dev @dump247/storybook-state\n```\n\nRegister the extension in `addons.js`.\n\n```javascript\nimport '@dump247/storybook-state/register';\n```\n\n### Create a Story\n\nUse the extension to create a story.\n\n```jsx\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { withState } from '@dump247/storybook-state';\n\nstoriesOf('Checkbox', module).add(\n  'with check',\n  withState({ checked: false })(({ store }) =\u003e (\n    \u003cCheckbox\n      {...store.state}\n      label=\"Test Checkbox\"\n      onChange={(checked) =\u003e store.set({ checked })}\n    /\u003e\n  )),\n);\n```\n\n## Extension\n\n### `withState(initialState)(storyFn)`\n\n`initialState` is the initial state of the component. This is an object where each key is a\nstate value to set.\n\n`storyFn` is the function that produces the story component. This function receives the story context\nobject `{ store: Store }` as the parameter.\n\nThis extension can be composed with other storybook extension functions:\n\n```jsx\nwithState({ initialState: '' })(\n  withInfo(`Some cool info`)(\n    ({ store }) =\u003e \u003cMyComponent {...store.state} /\u003e\n  )\n)\n```\n\n\n## Store API\n\n### `store.state`\n\nObject that contains the current state.\n\n### `store.set(state)`\n\nSet the given state keys. The `state` parameter is an object with the keys and values to set.\n\nThis only sets/overwrites the specific keys provided.\n\n### `store.reset()`\n\nReset the store to the initial state.\n\n## Panel\n\nThis project includes a storybook panel that displays the current state and allows\nfor resetting the state.\n\n![Panel Screenshot](panel-screenshot.png?raw=true\u0026v=2 \"Panel\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdump247%2Fstorybook-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdump247%2Fstorybook-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdump247%2Fstorybook-state/lists"}