{"id":19782445,"url":"https://github.com/steadylearner/prop-passer","last_synced_at":"2026-06-12T00:31:10.934Z","repository":{"id":32973313,"uuid":"188231420","full_name":"steadylearner/prop-passer","owner":"steadylearner","description":"Remove duplicate React props and wrappers with it.","archived":false,"fork":false,"pushed_at":"2023-01-03T22:28:38.000Z","size":3512,"stargazers_count":1,"open_issues_count":33,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T12:57:17.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.steadylearner.com/blogs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steadylearner.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-05-23T12:38:39.000Z","updated_at":"2023-06-21T02:47:19.000Z","dependencies_parsed_at":"2023-01-14T23:00:49.874Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/prop-passer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/steadylearner/prop-passer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Fprop-passer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Fprop-passer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Fprop-passer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Fprop-passer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/prop-passer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Fprop-passer/sbom","scorecard":{"id":849963,"data":{"date":"2025-08-11","repo":{"name":"github.com/steadylearner/prop-passer","commit":"f9da7d2c3869797ca89f63613789c4ac5c1cd441"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"149 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg","Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp","Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r","Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6","Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f","Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m","Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3","Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T22:13:45.116Z","repository_id":32973313,"created_at":"2025-08-23T22:13:45.116Z","updated_at":"2025-08-23T22:13:45.116Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34224103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-12T06:05:10.377Z","updated_at":"2026-06-12T00:31:10.877Z","avatar_url":"https://github.com/steadylearner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- don't pass this line =\u003e lllllllllllllllllllllllllllllllllllllllllllllll --\u003e\n\n\u003c!-- [![Travis branch](https://img.shields.io/travis/Steadylearner/react-marked-markdown/master.svg?maxAge=2592000)]() --\u003e\n\n[![npm version](https://badge.fury.io/js/prop-passer.svg)](https://badge.fury.io/js/react-easy-md) [![npm](https://img.shields.io/npm/dt/prop-passer.svg?maxAge=2592000)](https://img.shields.io/npm/dt/prop-passer.svg)\n\n\u003c!-- NPM only allos js instead of JavaScript --\u003e\n\n# PropPasser - Less is more\n\nExtract and remove duplicate **class** names, **props** and **wrapper components** such as **li**, **div**, **section** etc from React codes to **write less** and make them **reusable**.(Less code and the same result.)\n\n___\n\n![prop-passer image made by Steadylearner, www.steadylearner.com](static/images/prop-passer.png)\n\n```js\nimport {\n  Prop,\n  PropPasser,\n  Passers,\n  //\n  P,\n  share\n  //\n  key,\n  //\n  copy,\n  repeat,\n  // pass,\n  // withKeys,\n  // withProps,\n} from \"prop-passer\";\n```\n\n___\n\n## Install\n\n- Npm: `npm install --save prop-passer`\n\n- YARN: `yarn add prop-passer`\n\n## Demos\n\n 1. [prop-passer example with Codesandbox](https://codesandbox.io/s/8n3m4wy480)\n 2. [CRA example](https://github.com/steadylearner/prop-passer/tree/master/examples/prop-passer-example)\n\nThey will be similar to this image.\n\n![prop-passer-demo](static/images/prop-passer-example.png)\n___\n\n## Version Specific\n\n 1. It is minified to save your time to do the same.\n 2. `P` and `share` to help you copy and paste props from existing components.(You can use them instead of manually writing prop objects.)\n 3. The main image is made by [Steadylearner](https://www.steadylearner.com).\n 4. This will be the last major update for prop-passer API.\n\n___\n\n## API\n\nExports:\n\n  1. **`Prop`** ➡ passes the same prop to every children elements.\n  2. **`PropPasser`** ➡ When you want to pass prop and include a parent element also.(Prop and a parent wrapper element)\n  3. **`Passers`** ➡ Plural version of PropPasser, It will pass wrapper elements with prop for every child elements.\n  (Each child element has parent element with prop)\n  4. **`P`** and **`share`** ➡ You can use it like `share(\u003cP title=\"prop-passer\"/\u003e)` instead of manually converting `{title: \"prop-passer\"}` to pass props for **Prop, ProPasser and Passers**.\n  5. **`key`** ➡ alphanumeric string with user given length **n** without large depenedency.\n  6. `copy` ➡ copies elements user given **n** times. Use it for layout instead of using database seed for simple layout.\n  7. `repeat` ➡ repeats function **n** times.\n\n**`class, className, rewrite`** are reserved words to write CSS easily.\n\nevery props you define will be substituted at more specific level. But `class` and `className` will be used with existing ones.\n\n    ex) class=\"this is class\" className=\"this is className\"\n    ➡ className=\"this is class this is className\"\n\nclass names used with `rewrite` will substitute existing `class` or `className` or other `rewrite` at more specific level.\n\n    ex) class=\"this is class\", rewrite=\"this is to rewrite className\"\n        ➡ className=\"this is to rewrite className\"\n___\n\n## Main API(Prop, PropPasser, Passers)\n\n### Prop(sharedProp)\n\n```js\n// This will be omitted in other examples.\nimport React from \"react\";\nimport {\n  Prop,\n  PropPasser,\n  Passers,\n  //\n  P,\n  share\n  //\n  key,\n  //\n  copy,\n  repeat,\n  // pass,\n  // withKeys,\n  // withProps,\n} from \"prop-passer\";\n\nconst ImageProp = Prop(share(\u003cP\n  src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n  class=\"you can use class or className\"\n  alt=\"this will be shown\"\n/\u003e));\n\n// or with manually converting JSX prop to its corresponding object\n\n// const ImageProp = Prop({\n//   src: \"www.steadylearner.com/static/images/code/prop-passer.png\",\n//   class: \"you can use class or className\",\n//   alt: \"this will be shown\",\n// });\n\n  return (\n    \u003cImageProp\u003e\n      \u003cimg className=\"concat\"/\u003e\n      \u003cimg class=\"concat also\" /\u003e\n      \u003cimg rewirte=\"I will rewrite and replace\" /\u003e\n      \u003cimg rewrite /\u003e\n    \u003c/ImageProp\u003e\n  )\n\n  // equals to\n\n  \u003cimg\n    src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n    class=\"you can use class or className concat\"\n    alt=\"this will be shown\"\n  /\u003e\n  \u003cimg\n    src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n    class=\"you can use class or className concat also\"\n    alt=\"this will be shown\"\n  /\u003e\n  \u003cimg\n    src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n    class=\"I will rewrite and replace\"\n    alt=\"this will be shown\"\n  /\u003e\n  \u003cimg\n    src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n    alt=\"this will be shown\"\n  /\u003e\n```\n\nWhen you use `share(\u003cP /\u003e)` instead of manually writing object, You use external 70 bytes with React API.\n\nNormally, You won't need to care for it because prop-passer reduce byte size in the end result by removing duplicate props.\n\n___\n\n### PropPasser(sharedProp)(parentProp)(parentElement)\n\n```js\nconst ImagePropPasser = PropPasser(share(\u003cP\n  src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n  class=\"you can use class or className\"\n  alt=\"this will be shown\"\n/\u003e))({class: \"for section\"})(\"section\");\n\n  return (\n    \u003cImagePropPasser\u003e\n      \u003cimg className=\"show also\"/\u003e\n      \u003cimg rewirte=\"I will rewrite and replace\" /\u003e\n      \u003cimg rewrite /\u003e\n    \u003cImagePropPasser\u003e\n  )\n\n  // equals to code snippet below\n\n  \u003csection class=\"for section\"\u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      class=\"you can use class or className show also\"\n      alt=\"this will be shown\"\n    /\u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      class=\"I will rewrite and replace\"\n      alt=\"this will be shown\"\n    /\u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      alt=\"this will be shown\"\n    /\u003e\n  \u003c/section\u003e\n```\n\nIt is just **Prop** and parent element for children elements.\n___\n\n### Passers(sharedProp)(parentProp)(parentElement)\n\n```js\nconst ImagePassers = Passers(share(\u003cP\n  src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n  class=\"you can use class or className\"\n  alt=\"this will be shown\"\n  onClick={function(){\n    console.log(\"You can pass the same functions to each child elements also.\")\n  }}\n/\u003e))({class: \"for list\"})(\"li\");\n\n  return (\n    \u003cImagePassers\u003e\n      \u003cimg className=\"concat\"/\u003e\n      \u003cimg class=\"concat also\" /\u003e\n      \u003cimg rewirte=\"I will rewrite and replace\" /\u003e\n      \u003cimg rewrite /\u003e\n    \u003cImagePassers\u003e\n  )\n\n  // equals to pass wrapper \u003cli\u003e\u003c/li\u003e manually\n  // (No need to define key manually.)\n\n  \u003cli\n    class=\"for list\"\n    key=\"p-xxxxx\"\n    style={{listStyle: \"none\"}}\n  \u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      class=\"you can use class or className show\"\n      alt=\"this will be shown\"\n    /\u003e\n  \u003c/li\u003e\n  \u003cli\n    class=\"for list\"\n    key=\"p-xxxxx\"\n    style={{listStyle: \"none\"}}\n  \u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      class=\"you can use class or className show also\"\n      alt=\"this will be shown\"\n    /\u003e\n  \u003c/li\u003e\n  \u003cli\n    class=\"for list\"\n    key=\"p-xxxxx\"\n    style={{listStyle: \"none\"}}\n  \u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      class=\"I will rewrite and replace\"\n      alt=\"this will be shown\"\n    /\u003e\n  \u003c/li\u003e\n  \u003cli\n    class=\"for list\"\n    key=\"p-xxxxx\"\n    style={{listStyle: \"none\"}}\n  \u003e\n    \u003cimg\n      src=\"www.steadylearner.com/static/images/code/prop-passer.png\"\n      alt=\"this will be shown\"\n    /\u003e\n  \u003c/li\u003e\n```\n\nIt is just a plular version of **PropPasser**.\nYou don't have to manually copy and paste wrapper elements and its props.\n___\n\n### Key(times)\n\n`key(10)` ➡ xxxxxxxxxx\n\n```js\nimport { key } from \"prop-passer\";\n\nconsole.log(key(10)); // xxxxxxxxxx\n```\n\nYou can make your own alphanumeirc numbers with `key(n)`.\n(We don't need large dependency for that.)\n___\n\n## Development API(Copy, Repeat)\n\n### Copy(element)(times)\n\n```js\nimport \"React\" from \"react\";\n\nconst image = \u003cimg src=\"www.steadylearner.com/static/images/code/prop-passer.png\" \u003e;\ncopy(image)(1000); // \u003cimg src=\"www.steadylearner.com/static/images/code/prop-passer.png\" /\u003e * 1000\n```\n\nTest it with string and images in your local machine.\n___\n\n### Repeat(function)(times)\n\n```js\nimport { repeat } from \"prop-passer\";\n\nrepeat(function(){ console.log(\"repeat api from prop-passer, show it n times\")})(1000);\n\n// \"repeat api from prop-passer, show it n times\" * 1000\n```\n\nIt repeats the user given function. Test it in your local machine.\n___\n\n## Experimental API(pass, withKeys, withProps)\n\n### pass(sharedProp)([React Objects])\n\n```js\nimport React from \"react\";\nimport { pass } from \"prop-passer\";\n\nlet withPass = pass(\"li\")({\n  // 1. Write object with props for \u003cli\u003e element or use share(\u003cP /\u003e) syntax for multiple props.\n  // 2. You can pass anything you want\n  // 3. key() shouldn't be included here for it will be the same for every children components\n})([\n  \u003cp\u003eprop-passer\u003c/p\u003e,\n  \u003ch1\u003eprop-passer\u003c/h1\u003e,\n  \u003ch6\u003eprop-passer\u003c/h6\u003e,\n  \u003cp\u003eprop-passer\u003c/p\u003e,\n]);\n\nreturn(\n  \u003csection\u003e\n    \u003cul\u003e{withPass}\u003c/ul\u003e\n  \u003c/section\u003e\n)\n\n// will generate code below\n\n\u003csection\u003e\n  \u003cul\u003e\n    \u003cli style={ { listStyle: \"none\" } } key=\"p-xxxxx\" \u003e\n      \u003cp\u003eprop-passer\u003c/p\u003e\n    \u003c/li\u003e\n    \u003cli style={ { listStyle: \"none\" } } key=\"p-xxxxx\" \u003e\n      \u003ch1\u003eprop-passer\u003c/h1\u003e\n    \u003c/li\u003e\n    \u003cli style={ { listStyle: \"none\" } } key=\"p-xxxxx\" \u003e\n      \u003ch6\u003eprop-passer\u003c/h6\u003e\n    \u003c/li\u003e\n    \u003cli style={ { listStyle: \"none\" } } key=\"p-xxxxx\" \u003e\n      \u003cp\u003eprop-passer\u003c/p\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/section\u003e\n```\n\nThis is just the reverse API of **Passers**.\n___\n\n### withKeys or withProps\n\nThey are to pass props to every children elements.\nFor React protects those property names, you wouldn't need them.\nTest them if you want to understand what prop-passer API does with plain objects.\n\n## Read\n\n1. [steadylearner Blog Page](www.steadylearner.com/blog/search/prop-passer)\n\n2. [steadylearner Medium Post](https://medium.com/@steadylearner/)\n\n3. [React Children API blog post](https://mxstbr.blog/2017/02/react-children-deepdive/)\n\n## What is the next?\n\n1. Test\n2. Post\n\n## Copy and Paste with share and P API or manually write object?\n\nYou can use object when there are few props.\nBut you can use `share(\u003cP title=\"prop-passser\"\u003e)` syntax.\nSo that you can just copy and paste prop parts inside the valid scope.\n\nYou can test them at **CodeSandbox**.\n\n1. [First manual test with sizeof](https://codesandbox.io/s/jn47p3v4ny)\n\n2. [Test with Rust Chat App layout](https://codesandbox.io/s/u59hx)\n\n## Summary\n\nThe main point of this package is to help you work less.\n\n1. Extract common parts from your React app after you complete it.(Less code size.)\n\n2. Define common props and wrapper components first and write React Code.(Prototype Properties and wrappers)\n\n## Note\n\nIt uses shallow copy({...}) sytnax to merge props. So don't use it for heavily nested props(objects).\n(You may write own prop-passer for them if you need)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fprop-passer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Fprop-passer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fprop-passer/lists"}