{"id":15414869,"url":"https://github.com/quiibz/influer","last_synced_at":"2025-04-19T12:46:19.351Z","repository":{"id":48860119,"uuid":"382651681","full_name":"QuiiBz/influer","owner":"QuiiBz","description":"A tiny (\u003c 1KB) reactivity library","archived":false,"fork":false,"pushed_at":"2021-07-08T08:59:17.000Z","size":86,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-10T15:33:46.759Z","etag":null,"topics":["library","reactive","state","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/QuiiBz.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":"2021-07-03T15:42:40.000Z","updated_at":"2022-07-13T12:48:03.000Z","dependencies_parsed_at":"2022-09-03T13:52:55.054Z","dependency_job_id":null,"html_url":"https://github.com/QuiiBz/influer","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/QuiiBz%2Finfluer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuiiBz%2Finfluer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuiiBz%2Finfluer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuiiBz%2Finfluer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QuiiBz","download_url":"https://codeload.github.com/QuiiBz/influer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231238318,"owners_count":18345881,"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":["library","reactive","state","typescript"],"created_at":"2024-10-01T17:05:06.644Z","updated_at":"2024-12-26T01:55:17.873Z","avatar_url":"https://github.com/QuiiBz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003einfluer\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/QuiiBz/influer/actions\"\u003e\n        \u003cimg src=\"https://github.com/QuiiBz/influer/workflows/Test/badge.svg\" /\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cspan\u003eA tiny (\u003c 1KB) reactivity library\u003c/span\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ccode\u003eyarn add influer\u003c/code\u003e\n\u003c/p\u003e\n\n## Introduction\n**influer** is a tiny reactivity library. Exported in ESM, CJS, and IIFE, all \u003c 1KB.\n\nAvailable through Yarn/NPM:\n```bash\n# Yarn\nyarn add influer\n# NPM\nnpm install influer\n```\n\nOr a CDN:\n```html\n\u003cscript defer src=\"https://unpkg.com/influer\"\u003e\u003c/script\u003e\n```\n\n## Features\n-  Tiny (\u003c 1KB, 0 dependencies)\n- Use in Browser / NodeJS\n- Full TypeScript support\n\n## Example\n```ts\nimport influer from 'influer';\n\n// Create your state\nexport const { state, watch } = influer({\n    user: {\n        firstname: 'John',\n        lastname: 'Doe',\n    },\n});\n\n// Watch user's firstname\nwatch('user.firstname', (current, previous) =\u003e {\n    console.log(`Updated from ${previous} to ${current}`);\n});\n\n// Update the user somewhere\nstate.user.firstname = 'Jane';\n\n// Updated from John to Jane\n```\n\n## API\nThe `influer` (default exported) method gives you an object with a [`state`](#state), and two functions [`watch`](#watch) and [`watchOnce`](#watchOnce).\n\nYou must pass an object as an argument to `influer`, which represents the initial state. You can then export those variables to make them available on your application.\n```ts\nexport const { state, watch } = influer({\n    user: {\n        firstname: 'John',\n        lastname: 'Doe',\n    },\n});\n```\n\n### `state`\nWhen you need to modify the state, simply re-affect the desired field. If you use TypeScript and don't follow the type of the original state, you will have a warning.\n```ts\nimport { state } from '...';\n\n// Re-affect the whole user object\nstate.user = {\n    firstname: 'Jane',\n    lastname: 'Due',\n};\n\n// Re-affect only the firstname\nstate.user.firstname = 'Jane';\n```\n\n### `watch`\nYou can watch any object or property from the state using the `watch` or `watchOnce` methods.\n\nWith TypeScript, you can get auto-completion for all available keys to watch, corresponding to the objects or property in the state.\n```ts\nimport { watch } from '...';\n\n// Watch the whole user object\nwatch('user', (current, previous) =\u003e ...);\n\n// Watch only the firstname\nwatch('user.firstname', (current, previous) =\u003e ...);\n```\n\nAs you can see, you must pass a watcher callback as a second argument, which will be called when the property linked to the key will be updated.\n\nThis watcher callback gives you the current and the previous value of the property. If you return something which is not `void` inside this watcher callback, the value of this property will be updated to the one returned.\n```ts\nwatch('user.firstname', (current) =\u003e {\n    if(current === 'John') {\n        return 'Mister John';\n    }\n});\n\nstate.user.firstname = 'Jane';\n// firstname = Jane\n\nstate.user.firstname = 'John';\n// firstname = Mister John\n```\n\n### `watchOnce`\nThe same method as `watch`, except that the watcher callback will be called once, and the key will not be watched anymore.\n\nYou can reproduce the same behavior and stop watching a key at any time: the `watch` method returns an `unwatch` method that you can call:\n```ts\nconst unwatch = watch('user.firstname', (current, previous) =\u003e ...);\n\nstate.user.firstname = 'Jane';\n// firstname = Jane\n\nunwatch();\n\nstate.user.firstname = 'John';\n// firstname = Jane\n```\n\n## License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquiibz%2Finfluer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquiibz%2Finfluer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquiibz%2Finfluer/lists"}