Another highly requested feature, this one consists of:
According to what the user types in an input, we must show suggestions that are in our database.
It is usually used in e commerces, since it allows to improve the user experience and have faster purchases.
for our example we will use as backend the api https://api.publicapis.org/
This allows according to a parameter to find public api to use.
then what we will do is create an input that according to what the user types, we will show him a list of public api that match the search term.
a classic problem for developers,
They give us a list of states, from which state the user chooses we will show the cities, and within the cities another element.
today we will do something similar using jsonplaceholder:
what is jsonplaceholder?
It is a free api to use, which will allow us to play with its GETs, in this way this example will be the most real to a real problem in a real problem.
our objective is that when loading our component it will show a list of authors, when selecting an author a second select will be filled…
In several Ecommerces, blogs we see the function of an infinite scroll but suddenly we get bored of going down.
then the problem is to return to the top, we must make a gigantic scroll or in the case of the mobile it becomes heavier.
the simple solution: a scroll to top button.
simple, effective and that can work in our ecommerce, blogs, etc.
let’s install our dependencies first
yarn add react-icons
yarn add styled-components
our component GoToTop will look like this
Window.OnScroll: This DOM function detects when the window scrolls. …
in some occasions this component can come with our framework in others not, many people will say “I can download a package to solve it”, but we can really solve it with custom code and customize it to our need.
For this solution we will use styled components. why?
first let’s install styled component
yarn add styled-components
we will use the following structure for the project
Now we will create the index for our switch in this case, we will use a container…
Imagine that your next request is to perform this function: If the user does not have a profile image, the system must take their name and create an image from their initials in the purest Google style.
You say it is possible, but you still have no idea how. And so you ended up here…
Before we begin, we must clarify a few things.Ant Desing, Material Ui, by default bring this component to make use of it.
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.
why use react hook form:
· React Hook Form is a tiny library without any dependencies.
· Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.
· very simple to use
the first thing we will need is, install the dependencies to use
npm install react-hook-form
npm install antd
Next we will create the following document structure:
login will be the component that will contain our form, inputs will take care of managing the ant elements that you want to use with hook forms
In app, we use some layout styles of ant design…