{"id":20425439,"url":"https://github.com/tophat/with-immutable-props-to-js","last_synced_at":"2025-05-08T16:32:08.976Z","repository":{"id":33421681,"uuid":"158260160","full_name":"tophat/with-immutable-props-to-js","owner":"tophat","description":":smiling_imp: A higher-order component for keeping Immutable objects outside your presentational components","archived":false,"fork":false,"pushed_at":"2024-04-05T21:42:41.000Z","size":2989,"stargazers_count":76,"open_issues_count":32,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T02:56:23.079Z","etag":null,"topics":["immutable","props","react","redux","selectors"],"latest_commit_sha":null,"homepage":"https://with-immutable-props-to-js.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tophat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-11-19T16:51:50.000Z","updated_at":"2022-07-18T01:32:44.000Z","dependencies_parsed_at":"2024-02-26T23:00:28.643Z","dependency_job_id":null,"html_url":"https://github.com/tophat/with-immutable-props-to-js","commit_stats":{"total_commits":252,"total_committers":21,"mean_commits":12.0,"dds":"0.48809523809523814","last_synced_commit":"453247b9bcbe5020e987fc4cc03837c3457162e1"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophat%2Fwith-immutable-props-to-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophat%2Fwith-immutable-props-to-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophat%2Fwith-immutable-props-to-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophat%2Fwith-immutable-props-to-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tophat","download_url":"https://codeload.github.com/tophat/with-immutable-props-to-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224742403,"owners_count":17362232,"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":["immutable","props","react","redux","selectors"],"created_at":"2024-11-15T07:13:21.043Z","updated_at":"2024-11-15T07:13:21.581Z","avatar_url":"https://github.com/tophat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-immutable-props-to-js\n\n\u003cspan\u003e\u003cimg align=\"right\" src=\"./website/static/img/ml.png\" alt=\"Logo\"\u003e\u003c/span\u003e\n\n[![npm](https://img.shields.io/npm/v/with-immutable-props-to-js.svg)](https://www.npmjs.com/package/with-immutable-props-to-js)\n[![CICD](https://github.com/tophat/with-immutable-props-to-js/actions/workflows/main.yml/badge.svg)](https://github.com/tophat/with-immutable-props-to-js/actions/workflows/main.yml)\n[![npm downloads](https://img.shields.io/npm/dm/with-immutable-props-to-js.svg)](https://npm-stat.com/charts.html?package=with-immutable-props-to-js)\n[![codecov](https://codecov.io/gh/tophat/with-immutable-props-to-js/branch/master/graph/badge.svg)](https://codecov.io/gh/tophat/with-immutable-props-to-js)\n[![Renovate\nenabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat)](#contributors)\n[![Discord](https://img.shields.io/discord/809577721751142410)](https://discord.gg/YhK3GFcZrk)\n[![Maturity badge - level 3](https://img.shields.io/badge/Maturity-Level%203%20--%20Stable-green.svg)](https://github.com/tophat/getting-started/blob/master/scorecard.md)\n\nA higher-order component for keeping Immutable objects outside your presentational components\n\n## Installation\n\n```\nyarn add with-immutable-props-to-js\n```\n\nor\n\n```\nnpm install with-immutable-props-to-js\n```\n\nThis library also lists `react`, `react-dom`, and `immutable` as peer dependencies, so make sure they are installed in your project as well.\n\n## Usage\n\n```javascript\nimport withImmutablePropsToJS from 'with-immutable-props-to-js'\n```\n\nIf you're not using ECMAScript modules:\n\n```javascript\nconst withImmutablePropsToJS = require('with-immutable-props-to-js').default\n```\n\nExample:\n\n```javascript\nimport React from 'react'\nimport { connect } from 'react-redux'\nimport withImmutablePropsToJS from 'with-immutable-props-to-js'\n\nconst MyDumbComponent = props =\u003e {\n   // ...\n   // props.objectProp is turned into a plain JavaScript object\n   // props.arrayProp is turn into a plain JavaScript array\n}\n\nMyDumbComponent.propTypes = {\n   objectProp: PropTypes.object,\n   arrayProp: PropTypes.array,\n}\n\nconst mapStateToProps = state =\u003e ({\n   objectProp: mySelectorThatReturnsImmutableMap(state),\n   arrayProp: mySelectorThatReturnsImmutableList(state),\n})\n\nexport default connect(mapStateToProps)(withImmutablePropsToJS(MyDumbComponent))\n```\n\n## Motivation\n\nYou can read about the rationale for this higher-order component [here](https://tophat.github.io/with-immutable-props-to-js/docs/motivation).\n\n## Contributors\n\nFor information on how to contribute to this project, check out the [contributing guide](./CONTRIBUTING.md).\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://msrose.github.io\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/3495264?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Rose\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=msrose\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=msrose\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-msrose\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/brandonbaksh/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/39271619?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrandon Baksh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-brandonbaksh\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/apps/greenkeeper\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/in/505?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egreenkeeper[bot]\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-greenkeeper[bot]\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://jakebolam.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/3534236?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJake Bolam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=jakebolam\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-jakebolam\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.sanchitgera.ca\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/8632167?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSanchit Gera\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=sanchitgera\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://breezio.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/445636?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSiavash Mahmoudian\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-syavash\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.monicamoore.ca\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8105535?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003emonicamm95\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-monicamm95\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/danilomatamoros\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/6589617?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDanilo Matamoros\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=danilomatamoros\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/enheit\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8645216?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoman Mahotskyi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-enheit\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://twitter.com/pfmmfp\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2229060?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePablo Morra\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=pfmmfp\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=pfmmfp\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/apps/dependabot\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/in/29110?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edependabot[bot]\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-dependabot[bot]\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/maarteti\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1140243?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejinwoo choi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=maarteti\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://mcataford.github.io\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6210361?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarc Cataford\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=mcataford\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mh91chentophat\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/22596458?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Chen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tophat/with-immutable-props-to-js/commits?author=mh91chentophat\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n## Credits\n\nSpecial thanks to [Carol Skelly](https://github.com/iatek) for donating the 'tophat' GitHub organization.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftophat%2Fwith-immutable-props-to-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftophat%2Fwith-immutable-props-to-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftophat%2Fwith-immutable-props-to-js/lists"}