Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jameslnewell/react-create-component-from-tag-prop below:

jameslnewell/react-create-component-from-tag-prop: Create a `react` component from a `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.

npm install --save react-create-component-from-tag-prop

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>
);

• switch from lodash/pickBy to a custom utility function
• switch react from a dependency to a peerDependency and support v16

• fix: oops! generated files were being built to the wrong folder and not published to npm

• switch from lodash.omit to lodash/pickBy to future proof usage of lodash (#1).

• add: added escape hatch note

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

• fix: stop npm ignoring ./dist files

• fix: mistake in the Usage example

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4