react-multiple-render

Render multiple times the same component with different props.

Installation

$ npm install -S react-multiple-render

or

$ yarn add react-multiple-render

Usage

with es6

import multipleRender from "react-multiple-render";
import Component from "../component";

multipleRender(Component, '.component-container');

Always pass a valid json

<div
	class='component-container'
	data-props='{
	"someProp": "this is a text",
	"someObj": { "deepProp": "hi deep prop" },
	"someArr": [{"name": "a"},{"name": "b"},{"name": "c"},{"name": "d"}]
}'>
</div>

class ComponentName extends Component {
	render() {
		const { someProp, someObj, someArr } = this.props;
		return (
			<div>

				<span>{someProp}</span>{/* equal to: this is a text*/}

				<span>{someObj.deepProp}</span>{/* equal to: hi deep prop*/}

				<ul>
					{someArr.map(item => <li>{item.name}</li>)}
				</ul>
				{/* equal to:
					<ul>
						<li>a</li>
						<li>b</li>
						<li>c</li>
						<li>d</li>
					</ul>
				*/}
			</div>
		)
	}
}

test

$ npm test

or

$ yarn test

Build

$ npm run build

or

$ yarn build