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.

https://jsonplaceholder.typicode.com/

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?

• Freddom to build custom components with css
• No class policy
• Server Side rendering
• Sass and polished support

let’s start

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…

What Is a Letter Picture?

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…

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…