1.0.0-alpha.3 • Published 5 years ago
@flive/react-modal-menu v1.0.0-alpha.3
react-modal-menu
This module display a navigation menu that appears as an overlay, it extend react-kit Modal
.
Install
npm install @flive/react-modal-menu
Code example
Simple example with navigationLinks
, navigation tree as a json for generating accordions.
<ModalMenu
title="Menu"
onChange={({ state }) => console.log({ state })}
toggle={
<Button variant="secondary" type="button">
Simple example
</Button>
}
userProfile={{
avatarIdentifier: 'my@email.com',
content: 'First name, Last name',
linkComponent: 'a'
}}
navigationLinks={[
{
label: 'Link label 1',
key: 'link1',
children: [
{ label: 'Link label 2', key: 'link2', linkComponent: 'a' },
{ label: 'Link label 3', key: 'link3' }
]
},
{
label: 'Link label 2',
key: 'link2',
children: [
{ label: 'Link label 2', key: 'link2' },
{
label: 'Link label 3',
key: 'link3',
children: [{ label: 'Link label 4', key: 'link4' }]
}
]
},
{ label: 'Link label 3', key: 'link3' },
{ label: 'Link label 4', key: 'link4' }
]}
/>
Custom example with a child as function
<ModalMenu
title="Menu"
onChange={({ state }) => console.log({ state })}
toggle={
<Button variant="secondary" type="button">
Custom render
</Button>
}
userProfile={{
avatarImgSource:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
content: 'Helena Brauer'
}}
>
{({ handleClose }) => (
<Accordion margin="none" boxShadow="none">
<AccordionItem label="Level 1 label">
<Accordion>
<AccordionLink onClick={handleClose}>Accordion link 1</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 2</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 3</AccordionLink>
<AccordionItem label="Level 2 label">
<Accordion>
<AccordionLink onClick={handleClose}>
Accordion link 4
</AccordionLink>
<AccordionLink onClick={handleClose}>
Accordion link 5
</AccordionLink>
<AccordionLink onClick={handleClose}>
Accordion link 6
</AccordionLink>
<AccordionItem label="Level 3 label">
<AccordionLink onClick={handleClose}>
Accordion link 6
</AccordionLink>
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
</AccordionItem>
<AccordionLink onClick={handleClose}>Accordion link 2</AccordionLink>
<AccordionLink onClick={handleClose}>Accordion link 3</AccordionLink>
</Accordion>
)}
</ModalMenu>
Licence
This project is licensed under the MIT License - see the LICENSE file for details.
1.0.0-alpha.12
5 years ago
1.0.0-alpha.11
5 years ago
1.0.0-alpha.10
5 years ago
1.0.0-alpha.9
5 years ago
1.0.0-alpha.8
5 years ago
1.0.0-alpha.7
5 years ago
1.0.0-alpha.6
5 years ago
1.0.0-alpha.5
5 years ago
1.0.0-alpha.4
5 years ago
1.0.0-alpha.3
5 years ago