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
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.

Image for post
Image for post
Final Component

for this…

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.

Image for post
Image for post
Scroll to Top

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

Image for post
Image for post
Switch Component

Now we will create the index for our switch in this case, we will use a container…

Add a nice default image for users without profile pictures

Image for post
Image for post
Photo by 翔音 on Unsplash.

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.

Image for post
Image for post
Drawer Example

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:

Image for post
Image for post
structure for the project

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…

Danilo Rivera

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store