{"id":28378197,"url":"https://github.com/doubco/react-scenes","last_synced_at":"2025-07-04T09:33:29.587Z","repository":{"id":57344048,"uuid":"125549499","full_name":"doubco/react-scenes","owner":"doubco","description":"React Scenes is a simple way to create/test your react components inside your app.","archived":false,"fork":false,"pushed_at":"2019-02-23T18:25:15.000Z","size":5331,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-25T20:18:03.336Z","etag":null,"topics":["cli","demo","react","scene","styled-components","test"],"latest_commit_sha":null,"homepage":" https://react-scenes.doub.co","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/doubco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-16T17:35:21.000Z","updated_at":"2024-06-23T01:41:13.000Z","dependencies_parsed_at":"2022-09-12T06:30:31.214Z","dependency_job_id":null,"html_url":"https://github.com/doubco/react-scenes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doubco%2Freact-scenes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doubco%2Freact-scenes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doubco%2Freact-scenes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doubco%2Freact-scenes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doubco","download_url":"https://codeload.github.com/doubco/react-scenes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doubco%2Freact-scenes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258329274,"owners_count":22683912,"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":["cli","demo","react","scene","styled-components","test"],"created_at":"2025-05-30T02:05:56.299Z","updated_at":"2025-06-26T21:31:08.996Z","avatar_url":"https://github.com/doubco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Scenes v2 🌉\n\n**React Scenes is a simple way to create/test your react components inside your app.**\n\nLive demo at https://react-scenes.doub.co\n\n### Why?\n\nWe tried lots of tools to simplify our in-house react component creation process, most of the tools either has separate build process or not enough feature set. React Scenes is more simple, easy to use, flexible and does not need a separate build process, it is plug and play.\n\n### Installation\n\n\n`npm install react-scenes --save`\n\n---\n\n## Usage\n\n### Scenes\n\nLibraries is just a react component that uses `Scenes`, you can point any route to any library just like normal pages.\n\n```javascript\nimport { Scenes } from \"react-scenes\";\n\nimport * as all from \"./scenes\";\n\nlet scenes = Object.keys(all).map(key =\u003e all[key]);\n\nclass Library extends Component {\n  render() {\n    return (\n      \u003cScenes\n        title=\"My Library\"\n        config={{\n          caching: true\n        }}\n        scenes={scenes}\n      /\u003e\n    );\n  }\n}\n```\n\n#### title `string`\n\n\u003e Library Title.\n\n#### scenes `array`\n\n\u003e Scenes.\n\n#### config `object`\n\n##### caching `boolean`\n\nThis is the default state of caching, can be enable/disable from UI.\n\n#### actions `array`\n\n\u003e _check for more: custom actions_\n\n#### panels `array`\n\n\u003e _check for more: custom panels_\n\n#### devices `array`\n\n\u003e _check for more: custom devices_\n\n---\n\n### Scene\n\n\u003e Example scene\n\n```javascript\nimport { controllers } from \"react-scenes\";\n\nexport default {\n  title: \"Hello\",\n  target: Bar, // or as function ({ props, state, setState }) =\u003e {}\n  controllers: [\n    {\n      key: \"title\",\n      title: \"My title\",\n      controller: controllers.text(\"hello\")\n    }\n  ],\n  events: [\"onClick\"],\n  options: {\n    centered: true,\n    bg: \"light\" // light, dark, white, black\n  },\n  docs: `## Bar\n  **Hello World**\n  `\n};\n```\n\n#### title `string` `required`\n\n\u003e Title of your component.  \n\u003e You can also make titles nested like **Buttons\u003eNormal**.\n\n#### target `React Component or function` `required`\n\n\u003e Your Component. You can either give your component directly or you can pass a functions.\n\n```\ntarget: ({props, state, setState, pushEvent}) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cButton {...props}\u003e{props.title}\u003c/Button\u003e\n    \u003c/div\u003e\n)}\n```\n\n#### controllers `array`\n\n\u003e All the controllers your component need. They will be passed to your component as their props.\n\n#### events `array`\n\n\u003e Events you want to track.\n\n#### options `object`\n\n\u003e Two options are available. `theme` and `centered` (makes component centered in viewport with flexbox).\n\n#### docs `string`\n\n\u003e Component documentation or notes.\n\n---\n\n## Built-in Features\n\n### Panels\n\nWe provide 4 panels;\nYou can also add custom panels _check for more: custom panels_\nEvery panel can has its own specific actions _check for more: custom panel actions_\n\n#### Scenes 🗂\n\nAll scenes you have will appear in here.\n\n#### Controllers 🎚\n\nConrollers are your main tools to alter your component without direct input.\n\nWe provide 10 default controllers; `text`,`textarea`,`select`,`boolean`,`integer`,`float`,`range`,`object`,`array`,`color`\n\n##### text\n\n\u003e `controllers.text(\"Hello World\")`\n\n##### textarea\n\n\u003e `controllers.textarea(\"Hello \\n World\")`\n\n##### select\n\n\u003e `controllers.select(\"primary\", [\"primary\", \"destructive\"])`\n\nor you can add as key,value\n\n```\ncontrollers.select(\"primary\", [\n  {key:\"Primary, value:\"primary\"},\n  {key:\"Positive, value:\"positive\"}\n])\n```\n\n##### boolean\n\n\u003e `controllers.boolean(true, true)` \u003e _if you set second argument it will include `null` to controller cycle._\n\n##### integer\n\n\u003e `controllers.integer(42)`\n\n##### float\n\n\u003e `controllers.float(42.1)`\n\n##### range\n\n\u003e `controllers.range(42.1)`\n\n##### object\n\n\u003e `controllers.object({foo:\"bar\"})`\n\n##### array\n\n\u003e `controllers.array([1,2,3])`\n\n##### color\n\n\u003e `controllers.color(\"#000\",\"hex\" // hex, rgb, rgba)`\n\n#### Events 🚀\n\n\u003e Track your components events, just add event props to your scenes as an array.\n\n#### Code 📤\n\n\u003e This converts your components code to string for easy sharing.\n\n#### Docs 📓\n\n\u003e Docs are can be component documentation or any other notes. (markdown supported).\n\n---\n\n## Customize\n\n### Custom Panels\n\nWe exposed all props internally so you can access to alter anything you like.\n\n```javascript\n\u003cScenes\n  ...\n  panels={[\n    {\n        _id: \"my-apples\",\n        component: MyApples,\n        active: ({ get }) =\u003e get(\"active\").panel == \"my-panel\",\n        icon: \"🍎\",\n        actions: [\n          {\n            _id: \"toggle-apple-color\",\n            icon: ({ get })=\u003e get(\"config\").options.apple == \"green\" ? \"🍏\" : \"🍎\",\n            active: ({ get }) =\u003e get(\"config\").options.apple == \"green\",\n            onClick: ({ set }) =\u003e {\n              set(\"config\",{\n                options:{\n                  ...get(\"config\").options,\n                  centered: props.options.apple == \"green\" ? \"red\" : \"green\"\n                }\n              });\n            }\n          }\n        ]\n    }\n  ]}\n/\u003e\n```\n\n### Custom Controllers\n\nExample: myApp/.../myCustomController.js\n\n```javascript\nimport React, { Component } from \"react\";\n\nexport default (initialValue, foo, bar) =\u003e {\n  return {\n    type: \"customController\",\n    initialValue,\n    process: val =\u003e val,\n    input: (value, set, title, state, setState) =\u003e {\n      return (\n        \u003cdiv className=\"custom-controller\"\u003e\n          \u003cinput\n            value={value}\n            onChange={e =\u003e set(e.target.value)}\n            onFocus={e =\u003e setState({ focused: true })}\n            onBlur={e =\u003e setState({ focused: false })}\n          /\u003e\n          {focused ? \"Focused\" : \"Not Focused\"}\n        \u003c/div\u003e\n      );\n    }\n  };\n};\n```\n\nThere is 4 props you can use;\n\n- `type` `string` is just and identifier.\n\n- `initialValue` `anything` is the initial value of the input.\n\n- `process` `function` can be use to alter the input value.\n\n- `input` `function` has `value`, `set`, `title`, `state`, `setState` to update your data and state of your controller.\n\n#### Usage\n\nExample: someScene.js\n\n```\nimport customController from \"../myCustomController\";\n\nexport default {\n  title: \"Hello\",\n  target: Bar,\n  controllers: [\n    {\n      key: \"data\",\n      title: \"My Data\",\n      controller: customController(\"hello\", \"foo\", \"bar\")\n    }\n  ]\n};\n```\n\n### Custom Devices\n\nto add custom device sizes, inject it to `Scenes` like below.\n\n```javascript\n\u003cScenes\n  ...\n  devices={{\n    iphonex: {\n      title: \"iPhone X\",\n      width: 375,\n      height: 812\n    },\n    iphoneflex: {\n      title: \"iPhone Flex\",\n      width: \"375px\",\n      height: \"100%\",\n      unit: \"\"\n    }\n  }}\n/\u003e\n```\n\n---\n\n## Contribute\n\nPull requests are welcome and please submit bugs 🐛.\n\n## Contact\n\n- Follow [@doubco](https://twitter.com/doubco) on Twitter\n- Follow [@doubco](http://facebook.com/doubco) on Facebook\n- Follow [@doubco](http://instagram.com/doubco) on Instagram\n- Email \u003cmailto:hi@doub.co\u003e\n\n## Inspirations\n\n- [storybook](https://storybook.js.org)\n- [react-demo](https://github.com/rpominov/react-demo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoubco%2Freact-scenes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoubco%2Freact-scenes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoubco%2Freact-scenes/lists"}