{"id":21697350,"url":"https://github.com/jeescu/recomponent","last_synced_at":"2026-04-12T23:37:10.946Z","repository":{"id":57349266,"uuid":"96876424","full_name":"jeescu/recomponent","owner":"jeescu","description":"⚛ Write react components differently.","archived":false,"fork":false,"pushed_at":"2017-08-03T13:15:40.000Z","size":22,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-06T07:11:23.460Z","etag":null,"topics":["component","decoupled","layered","react","restructure","separate-view","separation-of-concerns","structured-component"],"latest_commit_sha":null,"homepage":"","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/jeescu.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":"2017-07-11T09:33:28.000Z","updated_at":"2024-03-12T09:15:55.000Z","dependencies_parsed_at":"2022-08-29T19:10:34.081Z","dependency_job_id":null,"html_url":"https://github.com/jeescu/recomponent","commit_stats":null,"previous_names":["jeescu/react-component"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Frecomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Frecomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Frecomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Frecomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeescu","download_url":"https://codeload.github.com/jeescu/recomponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244637103,"owners_count":20485446,"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":["component","decoupled","layered","react","restructure","separate-view","separation-of-concerns","structured-component"],"created_at":"2024-11-25T19:24:59.263Z","updated_at":"2025-10-30T14:46:03.308Z","avatar_url":"https://github.com/jeescu.png","language":"JavaScript","readme":"# recomponent\n[![build status](https://img.shields.io/travis/jeescu/recomponent/master.svg?style=flat-square)](https://travis-ci.org/reactjs/recomponent)\n[![bitHound](https://img.shields.io/bithound/code/github/jeescu/recomponent.svg?style=flat-square)](https://www.bithound.io/github/jeescu/recomponent)\n[![npm downloads](https://img.shields.io/npm/dm/recomponent.svg?style=flat-square)](https://www.npmjs.com/package/recomponent)\n[![npm version](https://img.shields.io/npm/v/recomponent.svg?style=flat-square)](https://www.npmjs.com/package/recomponent)\n\n\u003e Writing react components redefined.\n\n**recomponent** separates component view and logic while preserving its context. It creates a new way of structuring the components and allows us to keep our component clean and layered.\n\n### Installation\n\n```bash\nnpm install --save recomponent\n```\n\n## Usage\n\nCreate an `index.js` file under your component folder. Let's try to separate the concerns. Import your logic, view and css into this file and wrap them using `component.`\n\n### Example\nCheck `test` folder for additional examples.\n```js\nimport component from 'recomponent';\nimport MyComponentLogic from './MyComponent.js';\nimport MyComponentTemplate from './MyComponent.jsx';\nimport './MyComponent.css';\n\nexport default component({\n  logic: MyComponentLogic,\n  template: MyComponentTemplate,\n  styles: {}\n});\n```\n\n## Component\nWraps your logic, view, store and styles in a single whole component.\n\n#### `component({ ... })`\n```\n/**\n * @params {object} - { logic, template, store, styles }\n *\n * @paramsKeys logic {component} optional - class-based component (wc extends `component`)  \n * @paramsKeys template {function} required - react view that can be rendered.\n * @paramsKeys store {object} optional - initial store\n * @paramsKeys styles {object} optional - styles to use on view\n */\n component({ logic, template, store, styles })\n```\n\n### Store\n**recomponent** provides optional store from your component. This store is just like a state of your component. The reason why it's separated aside from using component's state itself, because you might likely to have your own stored data provider that has its own purpose. \n\nUse this as custom store for your specific component. If child components are also wrapped with **recomponent**, they can directly access the store from their context (`this.store` or `context.store` for dumb components).\n\nYou can add store by adding `store` key in declaration:\n```js\nexport default component({\n  ...\n  store: { title: 'My Store' }\n})\n```\n\n#### `this.store`\nStored data from the `component` it was defined.\n\n#### `this.setStore({ key: value })`\nUpdate store and forces the component to update.\n\n## Structure\nBy using the library, we will end up restructuring our component in different way. If our component is *class-based*, the logic and view (`render`) is separated. Thus, it's even more clean than before.\n```\n├── MyComponent          # Your component.\n│   ├── index.js         # Main entry point. You can do `recomponent` init here.\n│   ├── MyComponent.js   # Your logic. You can also do `recomponent` here.\n│   ├── MyComponent.jsx  # Your template. File ext. is optional (change the filename if using `.js`)\n│   └── MyComponent.css  # Your css\n```\n\n### Rules\n1. If your component is *class-based*, you can remove your `render` method in your logic. Also, there is no point on using **recomponent** on dumb components. But if you really like to, you can still declare it without the `logic`. \n2. Heard about `arrow functions` are already bound to its scope? but we want our react templates to still access it's own context (`this`) like we normally do. Yes, I want you to use `normal function`\n  ```js\n  // MyComponent.jsx\n  export default function (props) { // please do\n    // this - you'll get everything from the logic\n    // props - ah normal props, but you can get it also from the context.\n    return (\u003cdiv\u003e\u003c/div\u003e)\n  };\n  ```\n\n### Maintainer\n[John Edward Escuyos](https://github.com/jeescu)\n\n### License\n\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeescu%2Frecomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeescu%2Frecomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeescu%2Frecomponent/lists"}