{"id":15916852,"url":"https://github.com/ruben-arushanyan/react-component-shell","last_synced_at":"2025-03-24T07:31:42.057Z","repository":{"id":43106400,"uuid":"511051249","full_name":"Ruben-Arushanyan/react-component-shell","owner":"Ruben-Arushanyan","description":"react-component-shell is a package that allows you to quickly and easily create react-contexts and implement state management.","archived":false,"fork":false,"pushed_at":"2023-01-03T08:05:49.000Z","size":3942,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T05:32:48.133Z","etag":null,"topics":["component-shell","context","context-api","easy-context","react","react-component-shell","react-context","react-context-state","reactjs","state-management"],"latest_commit_sha":null,"homepage":"https://react-component-shell.js.org","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/Ruben-Arushanyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"Ruben-Arushanyan","custom":["https://www.paypal.me/rubenarushanyan"]}},"created_at":"2022-07-06T08:22:54.000Z","updated_at":"2025-01-30T09:03:58.000Z","dependencies_parsed_at":"2023-02-01T05:31:18.195Z","dependency_job_id":null,"html_url":"https://github.com/Ruben-Arushanyan/react-component-shell","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruben-Arushanyan%2Freact-component-shell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruben-Arushanyan%2Freact-component-shell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruben-Arushanyan%2Freact-component-shell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruben-Arushanyan%2Freact-component-shell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ruben-Arushanyan","download_url":"https://codeload.github.com/Ruben-Arushanyan/react-component-shell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245227429,"owners_count":20580880,"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":["component-shell","context","context-api","easy-context","react","react-component-shell","react-context","react-context-state","reactjs","state-management"],"created_at":"2024-10-06T18:05:38.228Z","updated_at":"2025-03-24T07:31:41.626Z","avatar_url":"https://github.com/Ruben-Arushanyan.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Ruben-Arushanyan","https://www.paypal.me/rubenarushanyan"],"categories":[],"sub_categories":[],"readme":"# [React Component Shell](https://react-component-shell.js.org/)\n\u003e You can find the full documentation on the [website](https://react-component-shell.js.org/)\n\n**react-component-shell** is a package that allows you to quickly and easily create **react-contexts** and implement **state management**.\n\n**Shell** is a JavaScript class that has certain methods and properties to provide some type of functionality in the project.\n\nThe main concept is to create **shell objects** and connect them to react components.\n\n## Installation\n\n```bash\nnpm install react-component-shell\n```\n\n## Basic Usage\n\nLet's create a **Game** shell that has two methods: `run()` and `stop()` that update the `.paused` property of the **state**.\n\n*game.js*\n```js\nimport {Shell} from 'react-component-shell'\n\nclass Game extends Shell {\n   state = { paused: true }\n\n   run() {\n      this.updateState(state =\u003e {\n          return {...state, paused: false}\n      })\n   }\n\n   stop() {\n      this.updateState(state =\u003e {\n          return {...state, paused: true}\n      })\n   }\n}\n\nexport {Game}\n```\n\nNow let's use the `createShellProvider()` function to create a react-context provider and access hooks for the Game shell.\n\n*game-context.js*\n```js\nimport {createShellProvider} from 'react-component-shell'\nimport {Game} from './game.js'\n\nconst [ GameProvider, useGame, useGameState ] = createShellProvider({ shellClass: Game })\n\nexport {GameProvider, useGame, useGameState}\n```\nThe `createShellProvider()` function returns an array with three values. The first value is a provider component, the second value is a react hook that returns a shell object, and the last value is a react hook that return a state value by a selector.  \nIn our example, we created the `GameProvider` provider and `useGame`, `useGameState` hooks.  \n\nNow let's use them in react app.\n\n*App.js*\n```jsx\nimport {GameProvider, useGame, useGameState} from './game-context.js'\n\nconst App = (props) =\u003e {\n    return (\n        \u003cGameProvider\u003e\n            \u003cGamePauseButton /\u003e\n        \u003c/GameProvider\u003e\n    )\n}\n\nconst GamePauseButton = (props) =\u003e {\n    const game = useGame()\n    const paused = useGameState(state =\u003e state.paused)\n\n    const clickHandler = () =\u003e {\n        if (paused) {\n            game.run()\n        } else {\n            game.stop()\n        }\n    }\n\n    return \u003cbutton onClick={clickHandler}\u003e{ paused ? 'Run' : 'Stop' }\u003c/button\u003e\n    \n}\n\nexport default App\n```\n\nIn the example above, we can apply the `useGame()` or `useGameState()` hooks to any component inside the `\u003cGameProvider\u003e`.\n\n`useGame()` returns a game object, and we can call its methods `run()` or `stop()` or read and write its properties.\n\n`useGameState(selector)` returns the value of the state of the game, which is indicated by the **selector** function, and every time the change of the specified value in the state will result in the re-rendering of the given component.\n\n\n\u003cbr/\u003e\n\n## [Documentation](https://react-component-shell.js.org/)\n\n\n- ### [Introduction](https://react-component-shell.js.org/docs/introduction)\n- ### [createShellProvider()](https://react-component-shell.js.org/docs/createShellProvider)\n- ### [Shell](https://react-component-shell.js.org/docs/shell)\n- ### [shell property](https://react-component-shell.js.org/docs/shell-prop)\n- ### [customProviderWrapper](https://react-component-shell.js.org/docs/customProviderWrapper)\n\n\n\n\u003cbr/\u003e\n\n## [Contributing](https://github.com/ruben-arushanyan/react-component-shell/blob/master/CONTRIBUTING.md)\n\nRead our [contributing guide](https://github.com/ruben-arushanyan/react-component-shell/blob/master/CONTRIBUTING.md) to learn about our development process.\n\n## [Code of Conduct](https://github.com/ruben-arushanyan/react-component-shell/blob/master/CODE_OF_CONDUCT.md)\n\nThis project has adopted the [Contributor Covenant](https://www.contributor-covenant.org) as its Code of Conduct, and we expect project participants to adhere to it. Please read the [full text](https://github.com/ruben-arushanyan/react-component-shell/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.\n\n## Authors\n\n- [Ruben Arushanyan](https://github.com/ruben-arushanyan)\n## License\n\n[MIT License](https://github.com/Ruben-Arushanyan/react-component-shell/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruben-arushanyan%2Freact-component-shell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruben-arushanyan%2Freact-component-shell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruben-arushanyan%2Freact-component-shell/lists"}