inspired by curry in functional programming
because react component always contains only one parameter which is props, my curry function's work is to deep merge props.
npm install --save react-curry
import React from 'react';
import curry from 'react-curry';
const BlueDiv = curry('div', {style: {backgroundColor: 'blue'}});
// Now you get a blue div component;
React.render(
<BlueDiv>
I am a blue div
</BlueDiv>,
document.getElementById('root')
);
import React from 'react';
import curry from 'react-curry';
// let us create a simple component which compose img and span
const ImageAndText = ({size, text, imgSrc}) => (
<div style={{width: size.width, height: size.height}}>
<img src={imgSrc}/>
<span>{text}</span>
</div>
);
// Now you get a size fixed ImageAndText component
const SqureImageAndText curry(ImageAndText, {
size: {
width: '100px',
height: '100px'
}
});
// u can use it;
React.render(
<SqureImageAndText imgSrc="https://www.google.com.hk/search?safe=strict&site=&q=%E5%85%83%E5%AE%B5%E8%8A%82&oi=ddle&ct=lantern-festival-2017-china-hong-kong-5653647470886912-hp&hl=zh-CN&sa=X&ved=0ahUKEwixx7mn0YfSAhVIoZQKHTzEAR0QPQgE" text="hello world" />,
document.getElementById('root')
);
using lodash merge function, will remove this dependency if stars more than 200 react