react-create-component-from-tag-prop
Create a react
component from a tag
prop.
Lets your users choose which HTML elements get styled by your 💅 styled-components
.
Note: This utility is a handy escape hatch for 💅
styled-components
, but consider whether you could use mixins or.withComponent(tag)
instead.
Installation
npm install --save react-create-component-from-tag-prop
Usage
Text.jsx
;;;; const TextFromTagProp = ; const Text = ` font-size: ; font-weight: ; font-style: ;`; TextpropTypes = as: PropTypes size: PropTypesnumber bold: PropTypesboolean italic: PropTypesboolean ;
ContactPage.jsx
;; <article> <Text as="h2" size=32 italic>Contact Us</Text> <form> <Text as="label" size=10 bold htmlFor="name">Name</Text> <input id="name"/> </form> </article>;
Change log
1.4.0
- switch from
lodash/pickBy
to a custom utility function - switch
react
from adependency
to apeerDependency
and supportv16
1.3.1
- fix: oops! generated files were being built to the wrong folder and not published to npm
1.3.0
- switch from
lodash.omit
tolodash/pickBy
to future proof usage oflodash
(#1).
1.2.0
- add: added escape hatch note
1.1.0
- add: updated
Usage
docs showing an example of limiting tags viaprop-types
1.0.2-3
- fix: stop
npm
ignoring./dist
files
1.0.1
- fix: mistake in the
Usage
example