{"id":13447733,"url":"https://github.com/andrevenancio/snap-state","last_synced_at":"2025-04-25T04:30:47.893Z","repository":{"id":35045399,"uuid":"200261448","full_name":"andrevenancio/snap-state","owner":"andrevenancio","description":"State management in a snap 👌","archived":false,"fork":false,"pushed_at":"2023-01-08T17:54:39.000Z","size":1287,"stargazers_count":24,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T21:39:13.083Z","etag":null,"topics":["hoc","hooks","jsx","preact","react","state","state-management"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/snap-state","language":"JavaScript","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/andrevenancio.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}},"created_at":"2019-08-02T15:52:46.000Z","updated_at":"2024-04-02T23:20:24.000Z","dependencies_parsed_at":"2023-01-15T12:41:10.391Z","dependency_job_id":null,"html_url":"https://github.com/andrevenancio/snap-state","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrevenancio%2Fsnap-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrevenancio%2Fsnap-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrevenancio%2Fsnap-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrevenancio%2Fsnap-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrevenancio","download_url":"https://codeload.github.com/andrevenancio/snap-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754587,"owners_count":21481838,"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":["hoc","hooks","jsx","preact","react","state","state-management"],"created_at":"2024-07-31T05:01:25.496Z","updated_at":"2025-04-25T04:30:47.142Z","avatar_url":"https://github.com/andrevenancio.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# snap-state\nstate management in a snap 👌. (under 1KB)\n\n## Motivation\nYou probably don't always need to use Redux or React Context API and wrapping your Consumer inside your Provider, or is it the other way around? 🤷‍♂️\n\nFor simpler applications you might just want a K.I.S.S. approach 🤔(did he just called me stupid?)\n\n## How does it work?\nThis library was done with React and Preact in mind, but if you're using your own thing good on you. I got you fam! Snap state is a little bit like a singleton with event dispatching. Everytime you set or change a property on the state, components listening to those events will be notified of changes.\n\nSo in the simplest form you can have\n\n```javascript\n// 1) import the state\nimport { State } from 'snap-state';\n\n// 2) define a property\nState.test = 123;\n```\n\nThis property `State.test` will now be available from anywhere in your application. You just need to import the `State` class. For example:\n\n```javascript\nimport { State } from 'snap-state';\nconsole.log(State.test); // returns 123;\n```\n\nIf you want to do anything every time the prop `State.test` changes, you can do something like:\n\n```javascript\nimport { State, onSnapState } from 'snap-state';\n\nonSnapState(['test'], ({ key, value }) =\u003e {\n    console.log('prop of key', key, 'changed to', value);\n});\n\n// change value of test to a random number.\nState.test = Math.random();\n\n// change value of test to a string\nState.test = 'abc';\n\n// change value of test to null\nState.test = null;\n```\nThe `onSnapState` method receives an array of props so you can listen to changes on multiple properties at the same time. It also returns a unsubscribe method that you should use when you want to unsubscribe from future events. The full example below:\n\n```javascript\nimport { State, onSnapState } from 'snap-state';\n\nconst unsubscribe = onSnapState(['test'], ({ key, value }) =\u003e {\n    console.log('prop of key', key, 'changed to', value);\n});\n\n// change value of test to a random number\nState.test = Math.random();\n\n// stops the subscription to prop changes\nunsubscribe();\n\n// changing the prop now will work as expected, but the `onSnapState` callback isn't called because we unsubscribe from it.\nState.test = 'abc';\nState.test = null;\n```\n\n## React\nYou can create your state somewhere (well, maybe at the application level to look profesh)!\nOnce that's out of the way, you can change it from anywhere in your app regardless of component hierarchy. 🎉🎉🎉\n\nNow every time the state changes, any component subscribing to changes will be updated.\n\nFor example, lets say we want to create a property that stores a \"theme\", how does that look? Well, just create your initial state:\n\n```javascript\nimport { State } from 'snap-state';\n\nState.theme = 'dark';\n```\n\nNow you just need to subscribe to changes to that particular prop. How? However you want to! Some examples below.\n\n### Hooks\nI know you're fancy, so if functional programming is your thing, check out the `useSnapState` hook.\n\n```javascript\nimport { useSnapState } from 'snap-state';\n\nfunction Example() {\n    const state = useSnapState(['theme']);\n    return (\n        \u003cp\u003ethe theme is {state.theme}\u003c/p\u003e\n    );\n}\n```\n\nEvery time you change `State.theme` anywhere on your app, your component will be updated.\n\n### High Order Components\nIf you're more into class based components you can decorate your component with `withSnapState` HOC.\n\n```javascript\nimport React, { Component } from 'react';\nimport { withSnapState } from 'snap-state';\n\nclass Example extends Component {\n    render() {\n        return (\n            \u003cp\u003ethe theme is {this.props.theme}\u003c/p\u003e\n        );\n    }\n}\n\nexport default withSnapState(['theme'])(Example);\n```\n\n### Vanilla\nWhat if you're building a custom WebGL application that makes a cat fly through space? What if you want to store all the planets your Space Cat visits?\n\n```javascript\nimport { State, onSnapState } from 'snap-state';\n\n// subscribe to changes on the \"planet\" prop\nconst unsubscribe = onSnapState(['planet'], ({ value }) =\u003e {\n    console.log(`Space cat just went pass ${value}.`);\n});\n\n// change your state and look at that amazing callback.\nState.planet = 'mars';\n\n// when your cat reaches another galaxy and you feel its time to let it go\n// you can unsubscribe from further changes\nunsubscribe();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrevenancio%2Fsnap-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrevenancio%2Fsnap-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrevenancio%2Fsnap-state/lists"}