1.0.0 • Published 2 years ago
simple-react-overlay v1.0.0
simple-react-overlay
An overlay popup menu for individual component
install
yarn add simple-react-overlay | npm i simple-react-overlay
usage
import styled from 'styled-components';
import ReactOverlay from './lib';
const SimpleMenu = () => {
return (
<DropUl >
<DropLi >Car</DropLi>
<DropLi >Bike</DropLi>
</DropUl>
)
}
function App() {
return (
<div >
<ReactOverlay overlay={<SimpleMenu/>} trigger={['click']}>
<button>
Click Menu
</button>
</ReactOverlay>
</div>
);
}
export default App;
const DropUl = styled.ul`
background: #0B162A;
border: 0.1rem solid #2B3952;
border-radius: 0.9rem;
padding:2.2rem 5.8rem 2.2rem 2.2rem;
list-style:none;
display:block;
`
const DropLi = styled.li`
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.4rem;
line-height: 2.1rem;
color: #FFFFFF;
cursor:pointer;
margin-bottom: 1.2rem;
&:last-child {
margin-bottom: 0;
}
`
options
Prop | Type | Default | Description |
---|---|---|---|
overlay | React Node | Menu component for display overlay menu items | |
trigger | ['click'] | 'click' | Array of HTML events |