{"id":13394470,"url":"https://github.com/gregberge/recompact","last_synced_at":"2025-03-13T20:31:32.211Z","repository":{"id":57349265,"uuid":"73489298","full_name":"gregberge/recompact","owner":"gregberge","description":"⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.","archived":true,"fork":false,"pushed_at":"2018-11-25T17:02:26.000Z","size":944,"stargazers_count":417,"open_issues_count":0,"forks_count":19,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-05-12T09:42:24.538Z","etag":null,"topics":["higher-order-component","hoc","react","recompose"],"latest_commit_sha":null,"homepage":"https://neoziro.github.io/recompact/","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/gregberge.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-11-11T15:34:24.000Z","updated_at":"2024-03-10T02:39:35.000Z","dependencies_parsed_at":"2022-08-29T19:10:33.917Z","dependency_job_id":null,"html_url":"https://github.com/gregberge/recompact","commit_stats":null,"previous_names":["neoziro/recompact"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Frecompact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Frecompact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Frecompact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Frecompact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregberge","download_url":"https://codeload.github.com/gregberge/recompact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478119,"owners_count":20297197,"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":["higher-order-component","hoc","react","recompose"],"created_at":"2024-07-30T17:01:20.784Z","updated_at":"2025-03-13T20:31:31.711Z","avatar_url":"https://github.com/gregberge.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg alt=\"Recompact\" src=\"https://neoziro.github.io/recompact/recompact-logo.png\" height=\"100\"\u003e\n\n[![Build Status](https://travis-ci.org/neoziro/recompact.svg?branch=master)](https://travis-ci.org/neoziro/recompact)\n[![codecov](https://codecov.io/gh/neoziro/recompact/branch/master/graph/badge.svg)](https://codecov.io/gh/neoziro/recompact)\n\nRecompact is a set of React higher-order components for reactive programming. It's a drop-in replacement of [Recompose](https://github.com/acdlite/recompose) with several enhancements.\n\n## State of recompact\n\nReact has introduced [React hooks](https://reactjs.org/docs/hooks-intro.html): a new way to manage state and lifecycle in React. It solves most of use case that recompact was trying to solve. That's why **recompact is now deprecated and not actively maintained**. The project will remain published on npm but it does not accept new issues and it won't evolve any more. If you use it, you are encouraged to migrate to hooks, if you don't use it yet, then do not install it. If you really like it, feel free to fork it!\n\n## Installation and Usage\n\nTo install the stable version:\n\n```sh\nyarn add recompact\n```\n\nand to use it in your code:\n\n```js\nimport recompact from 'recompact'\n```\n\n## Optimizing bundle size\n\n### [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)\n\nThe best way to reduce build size is to use [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash). It can be used with other libraries than lodash, just like this:\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [\n    [\"lodash\", { \"id\": \"recompact\" }],\n  ]\n}\n```\n\nTransforms\n```js\nimport recompact from 'recompact'\nimport { pure, withProps } from 'recompact'\n\nconst enhance = recompact.compose(\n  withProps({ className: 'beautiful' }),\n  pure,\n)\n```\n\nroughly to\n```js\nimport _compose from 'recompact/compose'\nimport _pure from 'recompact/pure'\nimport _withProps from 'recompact/withProps'\n\nconst enhance = _compose(\n  _withProps({ className: 'beautiful' }),\n  _pure,\n)\n```\n\n### Tree shaking\n\nSince [tree shaking isn't ready yet to reduce build size efficiently](https://advancedweb.hu/2017/02/07/treeshaking/), it is not supported in recompact.\n\n## [Documentation](https://neoziro.github.io/recompact/)\n\n## [Benchmarks](https://github.com/neoziro/recompact/tree/master/src/__benchmarks__)\n\n## Recompact vs. Recompose\n\nRecompact is a drop-in replacement* for [Recompose](https://github.com/acdlite/recompose) with better performance.\n\n\u003csmall\u003e\\* Except for the [callback](https://github.com/neoziro/recompact/issues/59) of `withState`'s state updater.\u003c/small\u003e\n\n### Flattened React components tree\n\nYou may have noticed the\n\"compact\" keyword in \"Recompact\". It's the main differences between Recompose and Recompact.\nRecompact compacts all higher-order components into a single one. It results in a flatter React\ntree. A flatter React tree has several advantages: performance improvement, better debugging (especially in React Developer Tools)\nand easier testing.\n\nLet's take two components using composition, [one using recompose](https://github.com/neoziro/recompact/blob/master/examples/RecomposeCounter.js) and [one using recompact](https://github.com/neoziro/recompact/blob/master/examples/RecompactCounter.js).\n\nThe two components are similar, but if you take a look at the React component tree (using React Developer Tool), you can see that the component using recompact is flat:\n\n\u003cimg width=\"401\" alt=\"recompact-vs-recompose\" src=\"https://cloud.githubusercontent.com/assets/266302/22173590/aff1866a-dfc8-11e6-983f-78dd3f84db56.png\"\u003e\n\n### New methods\n\nRecompact also features higher-order components that are not included in Recompose:\n\n- [omitProps](https://github.com/neoziro/recompact/tree/master/docs#omitpropspaths)\n- [pickProps](https://github.com/neoziro/recompact/tree/master/docs#pickpropspaths)\n\nAnd some very specific higher-order components that give you a lot of power:\n\n- [connectObs](https://github.com/neoziro/recompact/tree/master/docs#connectobsobsmapper)\n- [withObs](https://github.com/neoziro/recompact/tree/master/docs#withobsobsmapper)\n\nTo learn more about how to use `connectObs` and `withObs` inside your project, please refer to [this complete guide about `connectObs` and `withObs`](https://github.com/neoziro/recompact/blob/master/docs/Observables.md).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Frecompact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregberge%2Frecompact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Frecompact/lists"}