react-hide-div
v1.0.1
Published
HideDiv
Downloads
22
Readme
HideDiv
A super simple component to conditionally hide a div in React. The component accepts a bool as follows:
<HideDiv hide={false}><span>Hello world</span></HideDiv>
Demo & Examples
To build the examples locally, run:
npm install
npm start
Then open localhost:8000
in a browser.
Installation
The easiest way to use react-hide-div is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/react-hide-div.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-hide-div --save
Usage
EXPLAIN USAGE HERE
import HideDiv from 'react-hide-div';
<HideDiv>Example</HideDiv>
Complete working example:
import React from 'react';
import ReactDOM from 'react-dom';
import HideDiv from 'react-hide-div';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { hide: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState({hide: true});
}
render () {
const styles = {
width: "340px",
padding: "6px",
fontSize: "18px"
};
return (
<div>
<HideDiv hide={this.state.hide}>
<input style={styles} onChange={this.handleChange} placeholder="Think you can enter text into this input?" />
</HideDiv>
<HideDiv hide>Hidden by default</HideDiv>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Development (src
, lib
and the build process)
NOTE: The source code for the component is in src
. A transpiled CommonJS version (generated with Babel) is available in lib
for use with node.js, browserify and webpack. A UMD bundle is also built to dist
, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run npm start
. If you just want to watch changes to src
and rebuild lib
, run npm run watch
(this is useful if you are working with npm link
).