Functional Helpers for React
A work in progress, experimental, library for functional helpers to React components.
partial(Component, partialProps)
function MyComponent (props) {
return
}
const Partialed = partial(MyComponent, {
bar: 'bar',
a: 1,
children: [
Hello, world
]
});
render(
My message
);
Returns
Hello, world
My message
partialRight(Component, partialProps)
Same as partial, but (first) partially applied arguments take precedence. Useful for the times you want to guarantee that a component has a property set.
function MyComponent (props) {
return
}
const Partialed = partialRight(MyComponent, {
bar: 'bar',
a: 1,
children: [
Hello, world
]
});
render(
My message
);
Returns
My message
Hello, world
memoizeish(Component)
Almost like memoize, but more as a 1-step Markov chain, not with history. Utilizes a smart default shouldComponentUpdate from Omniscient.js.
const Memoized = memoizeish(function MyComponent (props) {
return
});
render();
render(); // not updated
render(); // not updated
wrap(value, [wrapper=identity])
function MyComponent (props) {
return
{props.foo}
;}
const Section = wrap(MyComponent, function (Comp, props) {
return (
{Comp(props)}
);
});
render(React.createElement(Section, { foo: 'foo' }));
Returns
foo
curry(Component, arity = 1, initialProps = { })
function MyComponent (props) {
return
}
const Curried = curry(MyComponent, 2, { a: 1 });
const Curried2 = Curried({ bar: 'bar' }); // Curry nr. 1
const Curried3 = Curried2({ // Curry nr. 2
baz: 'baz',
bar: 'foo',
a: 42
});
render(React.createElement(Curried3, { foo: 'foo' }));
Returns
With propTypes
Instead of defining the arity yourself you can set required proptypes on your component and automatically define arity. Curried components with proptypes will terminate currying when all required props are provided.
function MyComponent (props) {
return
}
MyComponent.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string.isRequired,
baz: React.PropTypes.string
};
const Curried = curryRight(MyComponent);
const Partial1 = Curried({ foo: 'foo' });
const Partial2 = Partial1({ baz: 'baz' });
const Partial3 = Partial2({ bar: 'bar' });
render(React.createElement(Partial3, { foo: 'override' }));
Returns
curryRight(Component, arity = 1, initialProps = { })
curryRight is to curry as partialRight is to partial. The former passed properties takes precedence of the latter. Useful for the times where you want to be sure that a component has properties set.
function MyComponent (props) {
return
}
const Curried = curryRight(MyComponent, 2, { a: 1 });
const Curried2 = Curried({ bar: 'bar' }); // Curry nr. 1
const Curried3 = Curried2({ // Curry nr. 2
baz: 'baz',
bar: 'foo',
a: 42
});
render(React.createElement(Curried3, { foo: 'foo' }));
Returns
(note the a and bar properties)
With propTypes
Instead of defining the arity yourself you can set required proptypes on your component and automatically define arity. Curried components with proptypes will terminate currying when all required props are provided.
function MyComponent (props) {
return
}
MyComponent.propTypes = {
foo: React.PropTypes.string.isRequired,
bar: React.PropTypes.string.isRequired,
baz: React.PropTypes.string
};
const Curried = curryRight(MyComponent);
const Partial1 = Curried({ foo: 'foo' });
const Partial2 = Partial1({ baz: 'baz' });
const Partial3 = Partial2({ bar: 'bar' });
render(React.createElement(Partial3, { foo: 'override' }));
Returns
(note the foo property)
flow(...components)
function Div (props) {
return
}
function Section (props) {
return {props.children};
}
function H1 (props) {
return
{props.children}
;}
function Italic (props) {
return {props.children};
}
const Composed = flow(Div, Section, H1, Italic);
render(
Hello World!
);
Returns
Hello World!
flowRight(...components)
function Div (props) {
return
}
function Section (props) {
return {props.children};
}
function H1 (props) {
return
{props.children}
;}
function Italic (props) {
return {props.children};
}
const Composed = flowRight(Italic, H1, Section, Div);
render(
Hello World!
);
Returns