React Render As

This library lets you easily create components which take an as prop to change which component they should render as

Installation

npm i --save react-render-as

Usage

Creating simple components

import { renderAs } from 'react-render-as';

const SomeComponent = ({ name }) => (<div>Hello {name}!</div>);

const Bold = renderAs('b');

(<Bold>This is bold</Bold>) // <b>This is bold</b>

(<Bold as="i">Tricked you its italics</Bold>) // <i>Tricked you its italics</i>

(<Bold as={SomeComponent} />) // <div>Hello !</div>

(<Bold as={<SomeComponent name="Joe" />} />) // <div>Hello Joe!</div>

Using the HOC

import { withAs } from 'react-render-as';

const Table = ({ children }) => children;

export default withAs(Table, 'table');