		{
		"name": "react-curry",
		"version": "1.0.6",
		"version": "1.0.7",
		"description": "react stateless curry",
		@@ -21,4 +21,4 @@ "main": "./lib/index.js",
		"dependencies": {
		"lodash": "^4.17.4",
		"react": "^15.4.2"
		"lodash": "*",
		"react": ">=14.0.0"
		},
		@@ -25,0 +25,0 @@ "repository": {

README.md

		@@ -12,14 +12,52 @@ inspired by curry in functional programming

		## how to use
		## use case
		when you want write some similar components.

		<img style="width: 100px" src="./water.png"/>
		<img style="width: 100px" src="./google.png"/>

		these component show green border when selected
		```
		import React from 'react';
		import curry from 'react-curry'; // just a function
		const Div = (props) => <div {...props}/>;
		import curry from 'react-curry';

		const GreenDiv = curry(Div, {style: {backgroundColor: 'green'}});
		// component which will show green border when pass selected = true
		const GreenBox = ({selected, InnerComponent, innerProps, size}) => (
		<div
		style={{
		border: selected ? 'solid 2px #1fbd87' : undefined,
		width: size.width,
		height: size.height,
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center'
		}}>
		{
		<InnerComponent selected={selected} {...innerProps} />
		}
		</div>
		);

		React.render(
		<GreenDiv>Hello world</GreenDiv>,
		document.getElementById('root')
		);
		```
		// Green box with inner text
		const TextGreenBox = curry(GreenBox, {
		InnerComponent: ({text, selected}) => <p style={{color: selected ? '#1fbd87' : '#666666'}}>{text}</p>,
		size: {
		height: '42px',
		width: '123px'
		}
		});

		// Green box with inner img
		const ImgGreenBox = curry(GreenBox, {
		InnerComponent: ({imgSrc}) => <img src={imgSrc} style={{ width: '100px' }} />,,
		size: {
		height: '128px',
		width: '128px'
		}
		});
		```

		## dependencies
		using lodash merge function, will remove this dependency if stars more than 200
		react

lib/index.js

react-curry - npm Package Compare versions

New alerts