{"id":13491866,"url":"https://github.com/developit/linkstate","last_synced_at":"2025-04-04T11:14:29.112Z","repository":{"id":54601477,"uuid":"87734574","full_name":"developit/linkstate","owner":"developit","description":"Bind events to state. Works with Preact and React.","archived":false,"fork":false,"pushed_at":"2021-02-08T17:27:29.000Z","size":25,"stargazers_count":291,"open_issues_count":5,"forks_count":23,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T10:09:36.171Z","etag":null,"topics":["event-handlers","handler","linkstate","preact"],"latest_commit_sha":null,"homepage":null,"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/developit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-09T19:45:32.000Z","updated_at":"2025-01-02T10:37:58.000Z","dependencies_parsed_at":"2022-08-13T21:00:48.457Z","dependency_job_id":null,"html_url":"https://github.com/developit/linkstate","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Flinkstate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Flinkstate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Flinkstate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Flinkstate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/linkstate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["event-handlers","handler","linkstate","preact"],"created_at":"2024-07-31T19:01:00.971Z","updated_at":"2025-04-04T11:14:29.087Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","readme":"# linkState\n\n\u003e Create an Event handler function that sets a given state property. Works with [preact] and [react].\n\n-   **Tiny:** ~**300 bytes** of [ES3](https://unpkg.com/linkstate) gzipped\n-   **Familiar:** it's just a function that does what you would have done manually\n-   **Standalone:** one function, no dependencies, works everywhere\n\n\u003e 🤔 **Why?**\n\u003e\n\u003e linkState() is memoized: it only creates a handler once for each `(key, eventPath)` combination.\n\u003e\n\u003e This is important for performance, because it prevents handler thrashing and avoids allocations during render.\n\n* * *\n\n## Table of Contents\n\n-   [Installation](#installation)\n-   [How It Works](#how-it-works)\n-   [Usage](#usage)\n-   [Contribute](#contribute)\n-   [License](#license)\n\n* * *\n\n## Installation\n\n```sh\nnpm install --save linkstate\n```\n\nThe [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com/linkstate/dist/linkstate.umd.js):\n\n```html\n\u003cscript src=\"//unpkg.com/linkstate/dist/linkstate.umd.js\"\u003e\u003c/script\u003e\n```\n\nThis exposes the `linkState()` function as a global.\n\n* * *\n\n## How It Works\n\nIt's important to understand what linkState does in order to use it comfortably.\n\n**`linkState(component, statePath, [valuePath])`**\n\n- `component`: the Component instance to call `setState()` on\n- `statePath`: a key/path to update in state - can be dot-notated for deep keys\n- `valuePath`: _optional_ key/path into the event object at which to retrieve the new state value\n\nIt's easiest to understand these arguments by looking at a simplified implementation of linkState itself:\n\n```js\nfunction linkState(component, statePath, valuePath) {\n  return event =\u003e {\n    let update = {};\n    update[statePath] = event[valuePath];\n    component.setState(update);\n  };\n}\n```\n\nIn reality, accounting for dot-notated paths makes this trickier, but the result is the same.\n\nHere's two equivalent event handlers, one created manually and one created with linkState:\n\n```js\nhandleInput = e =\u003e {\n  this.setState({ foo: e.target.value })\n}\n\nhandleInput = linkState(this, 'foo')\n```\n\nNotice how we didn't specify the event path - if omitted, `linkState()` will use the `checked` or `value` property of the event target, based on its type.\n\n## Usage\n\nStandard usage is a function that returns an event handler to update state:\n\n```js\nimport linkState from 'linkstate';\n\nclass Foo extends Component {\n  state = {\n    text: ''\n  };\n  render(props, state) {\n    return (\n      \u003cinput\n        value={state.text}\n        onInput={linkState(this, 'text')}\n      /\u003e\n    );\n  }\n}\n```\n\nYou can also use it as a [**polyfill**](https://ponyfill.com/#polyfill). This emulates the behavior of Preact 7.x, which provided `linkState()` as a method on its `Component` class. Since you're then calling `linkState()` as a method of the component instance, you won't have to pass in `component` as an argument:\n\n```js\nimport 'linkstate/polyfill';\n\n// Component.prototype.linkState is now installed!\n\nclass Foo extends Component {\n  state = {\n    text: ''\n  };\n  render(props, state) {\n    return (\n      \u003cinput\n        value={state.text}\n        onInput={this.linkState('text')}\n      /\u003e\n    );\n  }\n}\n```\n\n\n* * *\n\n## Contribute\n\nFirst off, thanks for taking the time to contribute!\nNow, take a moment to be sure your contributions make sense to everyone else.\n\n### Reporting Issues\n\nFound a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).\nIf it hasn't, just open a [new clear and descriptive issue](../../issues/new).\n\n### Submitting pull requests\n\nPull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.\n\n\u003e 💁 **Remember: size is the #1 priority.**\n\u003e\n\u003e Every byte counts! PR's can't be merged if they increase the output size much.\n\n-   Fork it!\n-   Clone your fork: `git clone https://github.com/\u003cyour-username\u003e/linkstate`\n-   Navigate to the newly cloned directory: `cd linkstate`\n-   Create a new branch for the new feature: `git checkout -b my-new-feature`\n-   Install the tools necessary for development: `npm install`\n-   Make your changes.\n-   `npm run build` to verify your change doesn't increase output size.\n-   `npm test` to make sure your change doesn't break anything.\n-   Commit your changes: `git commit -am 'Add some feature'`\n-   Push to the branch: `git push origin my-new-feature`\n-   Submit a pull request with full remarks documenting your changes.\n\n## License\n\n[MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)\n\n\n[preact]: https://github.com/developit/preact\n[react]: https://github.com/facebook/react\n","funding_links":[],"categories":["JavaScript","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Flinkstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Flinkstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Flinkstate/lists"}