How to implement this functionality in react?

user_14711670 0
Viewed 23

I want to make webzine website by React.
I want to implement that box size up and hided menu bar appears if I click index button as same as below figures.

enter image description here

enter image description here

what react library could help me to implement this functionality?

web-frontend reactjs
1 Answers

There are many front-end libraries for React. By using these you can easily achieve this I'll recommend Chakra UI they have every good example on their website give it try.

To Get Started with Chakra UI run npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion or follow their docs here

Code Example:-

<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
  Index Button
 </MenuButton>
  <MenuList>
  {/* Menu Options */}
  <MenuItem>Download</MenuItem>
  <MenuItem>Create a Copy</MenuItem>
  <MenuItem>Mark as Draft</MenuItem>
   <MenuItem>Delete</MenuItem>
  <MenuItem>Attend a Workshop</MenuItem>
</MenuList>
user_155388810
Related