{"id":13496241,"url":"https://github.com/effector/reflect","last_synced_at":"2025-04-09T18:19:16.583Z","repository":{"id":40749160,"uuid":"333739143","full_name":"effector/reflect","owner":"effector","description":"Easily render React components with everything you love from ☄️ effector.","archived":false,"fork":false,"pushed_at":"2025-03-22T15:28:19.000Z","size":539,"stargazers_count":85,"open_issues_count":7,"forks_count":10,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-09T18:19:10.597Z","etag":null,"topics":["bindings","components","effector","forms"],"latest_commit_sha":null,"homepage":"https://reflect.effector.dev/","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/effector.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}},"created_at":"2021-01-28T11:34:02.000Z","updated_at":"2025-03-22T15:28:22.000Z","dependencies_parsed_at":"2023-11-08T11:02:02.523Z","dependency_job_id":"a33643d8-355b-40a5-921f-92e95190b2cb","html_url":"https://github.com/effector/reflect","commit_stats":{"total_commits":183,"total_committers":12,"mean_commits":15.25,"dds":0.7650273224043715,"last_synced_commit":"01410188bde284c5010faa71dabc92f8beaeb65b"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Freflect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Freflect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Freflect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Freflect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/effector","download_url":"https://codeload.github.com/effector/reflect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085325,"owners_count":21045139,"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":["bindings","components","effector","forms"],"created_at":"2024-07-31T19:01:44.419Z","updated_at":"2025-04-09T18:19:16.560Z","avatar_url":"https://github.com/effector.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Packages"],"sub_categories":[],"readme":"# @effector/reflect\n\n☄️ Attach effector stores to react components without hooks.\n\n## Install\n\n```sh\nnpm install @effector/reflect\n# or\npnpm add @effector/reflect\n```\n\n[Getting started](https://reflect.effector.dev/learn/installation) | [API Docs](https://reflect.effector.dev/docs)\n\n## Motivation\n\nWhat's the point of reflect?\n\nIt's the API design that, using the classic HOC-like pattern, allows you to write React components with Effector in an efficient and composable way.\n\n```tsx\nimport { reflect, variant } from '@effector/reflect';\n\nexport function UserForm() {\n  return (\n    \u003cFormCard\u003e\n      \u003cName /\u003e\n      \u003cLastName /\u003e\n      \u003cSubmitButton /\u003e\n    \u003c/FormCard\u003e\n  );\n}\n\nconst Name = reflect({\n  view: Input,\n  bind: {\n    value: model.$name,\n    onChange: model.nameChanged,\n  },\n});\n\nconst LastName = reflect({\n  view: Input,\n  bind: {\n    value: model.$lastName,\n    onChange: model.lastNameChanged,\n  },\n});\n\nconst SubmitButton = reflect({\n  view: Button,\n  bind: {\n    type: 'submit', // plain values are allowed too!\n    disabled: model.$formValid.map((valid) =\u003e !valid),\n    onClick: model.formSubmitted,\n  },\n});\n```\n\nHere we've separated this component into small parts, which were created in a convenient way using `reflect` operators, which is a very simple description of the `props -\u003e values` mapping, which is easier to read and modify.\n\nWith `@effector/reflect`, our `$formValid` update will only cause the SubmitButton to be re-rendered, and for all other parts of our `\u003cUserForm /\u003e` there will literally be **zero** React work.\n\nTo learn more, please read the [full Motivation article](https://reflect.effector.dev/learn/motivation).\n\n## Release process\n\n1. Check out the [draft release](https://github.com/effector/reflect/releases).\n2. All PRs should have correct labels and useful titles. You can [review available labels here](https://github.com/effector/reflect/blob/master/.github/release-drafter.yml).\n3. Update labels for PRs and titles, next [manually run the release drafter action](https://github.com/effector/reflect/actions/workflows/release-drafter.yml) to regenerate the draft release.\n4. Review the new version and press \"Publish\"\n5. If required check \"Create discussion for this release\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Freflect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feffector%2Freflect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Freflect/lists"}