1.0.2 • Published 6 years ago
react-only-when v1.0.2
react-only-when
A declarative component for conditional rendering
Install
npm install --save react-only-whenUsage
import Only from 'react-only-when'
<Only when={true}>
<h1>Here I Am</h1>
</Only>Full Example
import React from 'react';
import Only from 'react-only-when'
class App extends React.Component {
state = {
show: true
};
toggle = () => this.setState(state => ({ show: !state.show }));
render() {
const { show } = this.state;
return (
<div className="app">
<button onClick={this.toggle}>Toggle</button>
<Only when={show}>
<h1>Here I Am</h1>
</Only>
</div>
);
}
}props
| prop name | type | default | isRequired | description |
|---|---|---|---|---|
| children | react element | null | true | A single child element |
| when | bool | false | true | When true, children will rendered as is |
| hiddenMode | string | "withNull" | false | Determines how children should be hidden |
| className | string | "r-o_hidden" | false | This is working in combination with hiddenMode={"withCss"} |
hiddenMode enum
| hiddenMode | description |
|---|---|
| "withNull" | Will not render the child |
| "withDisplay" | Will render the child with display:none |
| "withVisibility" | Will render the child with visibility:hidden |
| "withCss" | Will render the child with a CSS class (you can pass it a custom className prop) |
License
MIT © sag1v