Create a `react` component from a `tag` prop.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
README.md
package.json
yarn.lock

README.md

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

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import createComponentFromTagProp from 'react-create-component-from-tag-prop';

const TextFromTagProp = createComponentFromTagProp({
  tag: 'p',
  prop: 'as',
  propsToOmit: ['size', 'bold', 'italic']
});

const Text = styled(TextFromTagProp)`
  font-size: ${({size}) => size && `${size}px` || '12px'};
  font-weight: ${({bold}) => bold && 'bold' || 'normal'};
  font-style: ${({italic}) => italic && 'italic' || 'normal'};
`;

Text.propTypes = {
  as: PropTypes.oneOf([
    'p', 'span', 'label', 
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
  ]),
  size: PropTypes.number,
  bold: PropTypes.boolean,
  italic: PropTypes.boolean
}

export default Text;

ContactPage.jsx

import React from 'react';
import Text from './Text';

export default () => (
  <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 a dependency to a peerDependency and support v16

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 to lodash/pickBy to future proof usage of lodash (#1).

1.2.0

  • add: added escape hatch note

1.1.0

  • add: updated Usage docs showing an example of limiting tags via prop-types

1.0.2-3

  • fix: stop npm ignoring ./dist files

1.0.1

  • fix: mistake in the Usage example