{"id":16374804,"url":"https://github.com/jameslnewell/react-create-component-from-tag-prop","last_synced_at":"2025-03-21T01:32:08.251Z","repository":{"id":65411593,"uuid":"89637032","full_name":"jameslnewell/react-create-component-from-tag-prop","owner":"jameslnewell","description":"Create a `react` component from a `tag` prop.","archived":false,"fork":false,"pushed_at":"2018-07-23T16:48:45.000Z","size":40,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T03:18:25.337Z","etag":null,"topics":["component","is","react","styled-components","tag"],"latest_commit_sha":null,"homepage":null,"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/jameslnewell.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-04-27T20:19:26.000Z","updated_at":"2020-06-30T18:38:41.000Z","dependencies_parsed_at":"2023-01-23T10:55:01.279Z","dependency_job_id":null,"html_url":"https://github.com/jameslnewell/react-create-component-from-tag-prop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-create-component-from-tag-prop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-create-component-from-tag-prop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-create-component-from-tag-prop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-create-component-from-tag-prop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/react-create-component-from-tag-prop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244721281,"owners_count":20498923,"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","is","react","styled-components","tag"],"created_at":"2024-10-11T03:18:26.626Z","updated_at":"2025-03-21T01:32:07.970Z","avatar_url":"https://github.com/jameslnewell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-create-component-from-tag-prop\n\nCreate a `react` component from a `tag` prop.\n\nLets your users choose which HTML elements get styled by your 💅 `styled-components`.\n\n\u003e Note: This utility is a handy escape hatch for 💅 `styled-components`, but consider whether you could use [mixins](https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#using-javascript-to-our-advantage) or [`.withComponent(tag)`](https://www.styled-components.com/docs/basics#extending-styles) instead.\n\n## Installation\n\n```bash\nnpm install --save react-create-component-from-tag-prop\n```\n\n## Usage\n\n`Text.jsx`\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport createComponentFromTagProp from 'react-create-component-from-tag-prop';\n\nconst TextFromTagProp = createComponentFromTagProp({\n  tag: 'p',\n  prop: 'as',\n  propsToOmit: ['size', 'bold', 'italic']\n});\n\nconst Text = styled(TextFromTagProp)`\n  font-size: ${({size}) =\u003e size \u0026\u0026 `${size}px` || '12px'};\n  font-weight: ${({bold}) =\u003e bold \u0026\u0026 'bold' || 'normal'};\n  font-style: ${({italic}) =\u003e italic \u0026\u0026 'italic' || 'normal'};\n`;\n\nText.propTypes = {\n  as: PropTypes.oneOf([\n    'p', 'span', 'label', \n    'h1', 'h2', 'h3', 'h4', 'h5', 'h6'\n  ]),\n  size: PropTypes.number,\n  bold: PropTypes.boolean,\n  italic: PropTypes.boolean\n}\n\nexport default Text;\n\n```\n\n`ContactPage.jsx`\n```js\nimport React from 'react';\nimport Text from './Text';\n\nexport default () =\u003e (\n  \u003carticle\u003e\n    \u003cText as=\"h2\" size={32} italic\u003eContact Us\u003c/Text\u003e\n    \u003cform\u003e\n      \u003cText as=\"label\" size={10} bold htmlFor=\"name\"\u003eName\u003c/Text\u003e\n      \u003cinput id=\"name\"/\u003e\n    \u003c/form\u003e\n  \u003c/article\u003e\n);\n\n```\n\n## Change log\n\n### 1.4.0\n\n- switch from `lodash/pickBy` to a custom utility function\n- switch `react` from a `dependency` to a `peerDependency` and support `v16` \n\n### 1.3.1\n\n- fix: oops! generated files were being built to the wrong folder and not published to npm\n\n### 1.3.0\n\n- switch from `lodash.omit` to `lodash/pickBy` to future proof usage of `lodash` ([#1](https://github.com/jameslnewell/react-create-component-from-tag-prop/pull/1)).\n\n### 1.2.0\n\n- add: added escape hatch note\n\n### 1.1.0\n\n- add: updated `Usage` docs showing an example of limiting tags via `prop-types`\n\n### 1.0.2-3\n\n- fix: stop `npm` ignoring `./dist` files\n\n### 1.0.1\n\n- fix: mistake in the `Usage` example\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Freact-create-component-from-tag-prop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Freact-create-component-from-tag-prop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Freact-create-component-from-tag-prop/lists"}