{"id":22120060,"url":"https://github.com/joshbrew/scomponent","last_synced_at":"2026-07-18T18:38:56.703Z","repository":{"id":57344071,"uuid":"468033216","full_name":"joshbrew/sComponent","owner":"joshbrew","description":"React Components with a convenient, low code state manager, does not change any syntax on the components but adds cross-component/cross-script awareness","archived":false,"fork":false,"pushed_at":"2025-05-28T21:18:20.000Z","size":117,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T08:03:22.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshbrew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-03-09T17:44:51.000Z","updated_at":"2025-05-28T21:18:23.000Z","dependencies_parsed_at":"2024-11-10T01:26:06.391Z","dependency_job_id":"ca444002-8087-4f8b-a30a-11dc1263e9b9","html_url":"https://github.com/joshbrew/sComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joshbrew/sComponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2FsComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2FsComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2FsComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2FsComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshbrew","download_url":"https://codeload.github.com/joshbrew/sComponent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2FsComponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35627692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-18T02:00:07.223Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-01T14:20:10.801Z","updated_at":"2026-07-18T18:38:56.666Z","avatar_url":"https://github.com/joshbrew.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-scomponent\n\nA lightweight state management library for React that provides a simple event-driven approach to managing and synchronizing state across components. `react-scomponent` introduces an `EventHandler` class for global state management and an `sComponent` class that extends React components to seamlessly integrate with the global state.\n\nBest practice is to import the uncompiled files in your project so they compile with your version of react, else they're on the latest 18.6.1 build in the compilation. E.g. copy the EventHandler.ts and state.component.tsx files into your project or just import the files from the node_modules folder rather than importing from 'react-scomponent' as that targets a compilation.\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n  - [EventHandler](#eventhandler)\n  - [sComponent](#scomponent)\n- [API Reference](#api-reference)\n  - [EventHandler Class](#eventhandler-class)\n  - [sComponent Class](#scomponent-class)\n- [Examples](#examples)\n  - [Counter Example](#counter-example)\n- [Components Documentation](#components-documentation)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Introduction\n\n`react-scomponent` is a minimalistic state management library designed to simplify state handling in React applications. It leverages an event-driven model to allow components to subscribe to state changes, ensuring that your UI stays in sync with your data without the complexity of larger state management solutions like Redux or MobX.\n\n## Features\n\n- **Event-Driven State Management**: Subscribe to specific state changes and react accordingly.\n- **Global State Synchronization**: Share state across components without prop drilling.\n- **Local Storage Integration**: Optionally persist state between sessions using `localStorage`.\n- **Lightweight and Simple**: Minimal overhead and easy to integrate into existing projects.\n\n## Installation\n\nYou can install `react-scomponent` via npm:\n\n```bash\nnpm install react-scomponent\n```\n\nOr using yarn:\n\n```bash\nyarn add react-scomponent\n```\n\n## Getting Started\n\n### EventHandler\n\nThe `EventHandler` class manages global state and allows components to subscribe to changes in specific state properties.\n\n#### Importing EventHandler\n\n```javascript\nimport { EventHandler } from 'react-scomponent';\n```\n\n#### Creating an EventHandler Instance\n\nYou can create a new instance of `EventHandler` to manage your application's state:\n\n```javascript\nconst state = new EventHandler({\n  count: 0,\n}, true); // The second parameter enables localStorage persistence\n```\n\n- **Parameters:**\n  - `data` (optional): An object containing initial state values.\n  - `useLocalStorage` (optional): A boolean indicating whether to persist state in `localStorage`.\n\n### sComponent\n\nThe `sComponent` class extends `React.Component` and integrates with the `EventHandler` to automatically synchronize component state with the global state.\n\n#### Importing sComponent\n\n```javascript\nimport { sComponent } from 'react-scomponent';\n```\n\n#### Creating an sComponent\n\n```javascript\nclass Counter extends sComponent {\n  state = {\n    count: 0,\n  };\n\n  //__statemgr = state //you can also override the default state manager with your own, e.g. to make separate state objects.\n\n  // Your component logic...\n}\n```\n\nBy extending `sComponent`, your component automatically subscribes to changes in the global state properties that match its local `state` keys.\n\n## API Reference\n\n### EventHandler Class\n\n#### Methods\n\n- **`constructor(data?, useLocalStorage?)`**\n  - Initializes the state with the provided data and sets up localStorage if enabled.\n- **`setState(updateObj)`**\n  - Merges the `updateObj` into the current state and triggers events for changed properties.\n- **`setValue(key, value)`**\n  - Sets a single state property and triggers its event.\n- **`subscribeEvent(key, onchange)`**\n  - Subscribes to changes of a specific state property.\n- **`unsubscribeEvent(key, sub?)`**\n  - Unsubscribes from a state property change event.\n- **`subscribeState(onchange)`**\n  - Subscribes to all state changes.\n- **`unsubscribeState(sub)`**\n  - Unsubscribes from the state change subscription.\n- **`getSnapshot()`**\n  - Returns a shallow copy of the current state.\n- **`updateLocalStorage()`**\n  - Manually updates the `localStorage` with the current state.\n- **`restoreLocalStorage(data?)`**\n  - Restores state from `localStorage`.\n\n#### Properties\n\n- **`data`**\n  - The internal state object.\n- **`useLocalStorage`**\n  - A boolean indicating if `localStorage` is used.\n- **`onRemoved`**\n  - A callback function invoked when a trigger is removed.\n\n### sComponent Class\n\n#### Methods\n\n- **`constructor(props)`**\n  - Initializes the component and subscribes to state changes.\n- **`setState(s)`**\n  - Overrides React's `setState` to synchronize with the global state.\n- **`__subscribeComponent(prop, onEvent?)`**\n  - Subscribes the component to a specific state property.\n- **`__unsubscribeComponent(prop?)`**\n  - Unsubscribes the component from state property changes.\n- **`__setUseLocalStorage(bool)`**\n  - Enables or disables `localStorage` usage.\n\n#### Usage Notes\n\n- The `sComponent` automatically subscribes to state properties that match its own state keys.\n- Use `doNotSubscribe` in `props` to exclude specific state properties from automatic subscription.\n\n## Examples\n\n### Counter Example\n\n#### Setting Up the Global State\n\n```javascript\n// state.js\nimport { EventHandler } from 'react-scomponent';\n\nexport const state = new EventHandler({\n  count: 0,\n}, true);\n```\n\n#### Creating the Counter Component\n\n```javascript\n// Counter.js\nimport React from 'react';\nimport { sComponent, state } from 'react-scomponent';\n\nexport class Counter extends sComponent {\n  state = {\n    count: 0,\n  };\n\n  componentDidMount() {\n    setTimeout(()=\u003e{\n        this.setState({ count: 1 });\n    },1000)\n  }\n\n  increment = () =\u003e {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  decrement = () =\u003e {\n    this.setState({ count: this.state.count - 1 });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eCount: {this.state.count}\u003c/p\u003e\n        \u003cbutton onClick={this.increment}\u003eIncrement\u003c/button\u003e\n        \u003cbutton onClick={this.decrement}\u003eDecrement\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n//subscribe in the script anywhere, and it will be synchronized with all sComponents tied to that state object\nstate.subscribeEvent('count',(ct)=\u003e{\n    console.log(\"Count: \" + ct);\n});\n\n//e.g. you can interact with the state anywhere and propagate to components\nsetInterval(()=\u003e{\n    state.setState({ count: this.state.count + 1 });\n},1000)\n```\n\n#### Using the Counter Component\n\n```javascript\n// App.js\nimport React from 'react';\nimport { Counter } from './Counter';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eCounter Example\u003c/h1\u003e\n      \u003cCounter /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Components Documentation\n\nFor a detailed breakdown of each component and its use cases, refer to [./components.md](./components.md).\n\nThis file provides in-depth documentation for components like `StateAccordion`, `StateButton`, `StateCheckbox`, and more, explaining their purposes, features, and code examples.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshbrew%2Fscomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshbrew%2Fscomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshbrew%2Fscomponent/lists"}