Create a custom drawer with React/Javascript
Before we begin, we must clarify a few things.Ant Desing, Material Ui, by default bring this component to make use of it.
The only objective of this post is to show you how to make yours and learn a little more about react / javascript in the process.
So, what is a drawer?
he drawer component is a slide-in element that can be used to display relevant information without losing the context of the page.
it is often used to create side menus. Here we will learn how to create ours, we will modify it so that it is not like the other tutorials.
our Goals are:
create a drawer from scratch.
will animate from the bottom of the page up.
it could contain any component inside it.
It will be reusable.
The first thing will be to create a template with ant design, so that our app has some style.
now we focus on our drawer component
The logic to follow is that in our app, we will call the drawer component, who must be able to render any other component that we pass in our case, this will be a form.
the idea is to make the component reusable for any case that is required, be it by sending a menu, form or any other element that you want to show.
the drawer component when wrapping any component, this will pass other props, such as close () which will allow to close the drawer from any component that contains it.
This is where our logic begins to work.
this function will receive another component which we call in the same way (I am so original), it will receive a boolean value, and a function that changes said value, finally the rest of the props that come we will destruct them in the rest property.
html refers to the document. since react renders all content within a div. By taking the entire document we will ensure that our drawer is drawn on the entire screen.
now inside our useEffect, we will check our props isVisible, if this is true, the drawer will be drawn, otherwise it is hidden.
Why do this validation?
because it can be the case that a component requires that when it is mounted, the drawer starts true.
now we will play around with javasript taking the document, every time an event is fired we will add the class that is required to show the Drawer.
The Drawer works in a similar way to a modal, this element exists in the DOM, but it is hidden from the user until an action triggers it.
Finally we will proceed to mount the component inside the drawer.
{… rest} here we pass to the component all the props that came with it.
close = {close} here we pass the close function of the drawer to any component that it renders. in this way we can control the drawer from her son.
As we said at the beginning our Drawer will contain a form.
at the moment of creating it, it will receive by props the close property of the drawer, so we will use it when the form has its correct data, we will automatically close the drawer.
finally in our app, we will call our drawer and form.
As the only state this will contain the property is visible, and both will be passed to the drawer to be controlled from the app.
Then we pass our form to the drawer so that it can render it.
our Drawer component will look like this
Complete Code
