1.0.5 • Published 5 years ago
simple-react-popover v1.0.5
React_Popover
A React Popover component that adds an overlay but highlights the anchor element
Example available here: https://reactpopover.murrayleroux.now.sh
NPM Package: https://www.npmjs.com/package/simple-react-popover
Dependencies
- Node v8+ and NPM
Starting it up
npm install
to install any other necessary dependenciesnpm run build
exports storybook as a static app to thepublic
foldernpm start
will start up storybook locally to demo the componentnpm test
runs the unit testsnpm run deploy
deploys the latest to the example on zeit
Any push to github will trigger a Travis build, which will update the npm package and deploy the latest version to now here: https://reactpopover.murrayleroux.now.sh
Usage
Install using npm i simple-react-popover
API
anchor
- Required. A React Ref to attach the Popover to.direction
- Required. String. One of['top', 'bottom', 'left', 'right']
open
- Required. Boolean. Is the Popover showing or not.
Example
import Popover from 'simple-react-popover'
class Story extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.setAnchorRef = this.setAnchorRef.bind(this);
}
setAnchorRef(ref) {
this.setState({
anchorRef: ref
});
}
render() {
let isOpen = boolean('Is Open?', true);
let direction = select('Direction', ['top', 'bottom', 'left', 'right'], 'right');
let anchorTop = number('Anchor Top', 200);
let anchorLeft = number('Anchor Left', 700);
return (
<div>
<div ref={this.setAnchorRef} style={{
width: '150px',
height: '100px',
border: '1px solid black',
backgroundColor: 'white',
position: 'relative',
top: `${anchorTop}px`,
left: `${anchorLeft}px`
}}>
This is the anchor tag where the popover will attach to.
</div>
<Popover anchor={this.state.anchorRef} direction={direction} open={isOpen}>
<h3>Heading text</h3>
<p>Some paragraph text... Some paragraph text... Some paragraph text... Some paragraph text...</p>
</Popover>
</div>
);
}
}
Conventions
- Tests are located in the same folder as the component tested and has
.spec.js
extensions - Stories are located in the same folder as the component described and has
.story.js
extensions
Authored by
Murray le Roux