Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Tools
UiMenu
Package: @uireact/menu
The menu is a floating component that allows you to render floating content when visible. This content renders underneath its trigger.
1. Make sure you install peer dependencies first:
2. Install package:
npm i -S @uireact/menu
<MenuExample />
The menu is a controlled component, it means you have to handle the visibility and closure callback through 2 props:
- visible
- closeMenuCB
The visible prop will set the visibility of the menu.
The closeMenuCB prop will be executed when the user has performed an action to close the menu, such as ESC key or clicking outside the menu.
You could create more complex animations when combining multiple components for instance:
<AnimatedMenuExample />
For this example we've added a function that takes an index and multiples that for a value which will give us the delay amount for each of the items inside the menu.
import { UiReactFadeUp, iReactFadeLeft } from '@uireact/framer-animations'; // Create the helper function for getting the delay const getDelayedAnimation = (index: number): MotionProps => { // We use the animation UiReactFadeLeft to change the direction on which things appear in the screen return { ...UiReactFadeLeft, transition: { delay: 0.2 * index } }; }; // Our UiMenu component uses the animation UiReactFadeUp when appears <UiMenu motion={UiReactFadeUp}> {items.map((v, index) => <UiCard motion={getDelayedAnimation(index)}>...Content...</UiCard>)} </UiMenu>
This is just a small version of how this could potentially be used but your creative is your own limit.
Using prop inverse in the < UiMenu /> component will render it using an inversed background.
<MenuExample inverse />