Library to create higher order React component with built-in conditional rendering
npm install react-conditional-render[![build status][1]][2]
``
npm install --save react-conditional-render
let say you have a React component define like
`javascript
import React from 'react';
export default React.createClass({
displayName: 'UserProfile',
render() {
return (
You can compose this component with
to use conditional rendering`javascript
import React from 'react';
import { withConditionalRendering } from 'react-conditional-render';const UserProfile = React.createClass({
displayName: 'UserProfile',
render() {
return (
Name : {this.props.user.name}
Age : {this.props.user.age}
Email : {this.props.user.email}
);
},
});export default withConditionalRendering(UserProfile);
`Then you can use this component in other component and use the
property to render the UserProfile only if
the condition property value is truthy (or a function that returns a truthy value)`javascript
import React from 'react';
import UserProfile from './userprofile';export default React.createClass({
getInitialState() {
return {
users: UserStore.all()
};
},
render() {
return (
{this.state.users.map(user =>
42} />)}
);
},
});
`You can also just wrap some HTML elements with the
component`javascript
import React from 'react';
import { Conditional } from 'react-conditional-render';export default React.createClass({
getInitialState() {
return {
users: UserStore.all()
};
},
render() {
return (
{this.state.users.map(user => (
42}>
Name : {user.name}
Age : {user.age}
Email : {user.email}
))}
);
},
});
``
[1]: https://api.travis-ci.org/mathieuancelin/react-conditional-render.svg
[2]: https://api.travis-ci.org/mathieuancelin/react-conditional-render