DEV Community: Atefeh Mohammaddoust

Implementing a dark theme toggle with react-redux

Atefeh Mohammaddoust — Tue, 12 Jul 2022 16:01:17 +0000

Implementing a dark theme toggle with react-redux

It’s been a few years since dark mode became a popular feature of many websites, so I decided to write about how to implement it using react-redux. All code from this tutorial is available in this repository, And Here’s what we will build:

The Logic

We have a switch button that has two states: Sun and Moon. Sun Icon is for the light theme, while Moon Icon is for the dark theme. in this project, Redux solved a lot of problems for you, you could easily access data throughout the entire app without having to pass it through each component. Not only could you read this data, but you could also manipulate the state from anywhere in the app as well. and we have a config file that I define the theme properties for LIGHT and DARK themes, such as textColor, backgroundColor, borderColor, and so on. I also attached my basic theme objects for those two themes.

Note: you should use redux when You have a very large and complex app with multiple states that are needed in many places of the app and You have often refreshing states.

The Project Setup

I usually use yarn because it is a fast, reliable, and secure alternative to NPM. There are three things we need:

an actual store to hold the state
an action to dispatch intent
a reducer to handle that intent
an action type

That’s easy enough:

About Action You can think of an action as an event that describes something that happened in the application. here the action is changeTheme.

I Always handle any manipulate in Reduce section.

I use to keep action types separately because, In this way, you reduce the risk of accidentally misspelling one or more of the action types in one of the sources where they’re used. This will also prevent wasting a lot of time debugging a simple bug.

Now, to provide a theme

We need to tell our component(s) how to style themselves based on the current theme.

> NOTE : Remember that you must define variables in both classes, even if they are the same.

Let’s toggle

Great! Now all that is left, is to dispatch the changeTheme action whenever the icon is clicked.

Let’s take a closer look, we use the useSelector hook to get state from our store using a selector function.

All done!

Thanks for reading!
this post is already on https://atefe-dev.medium.com/implementing-a-dark-theme-toggle-with-react-redux-14ec197cbff7

Create a show/hide password toggle button in Reactjs.

Atefeh Mohammaddoust — Fri, 08 Jul 2022 17:25:21 +0000

Create a show/hide password toggle button in Reactjs.

Hey, if you’re looking to find out how to create a show/hide password toggle like this, I’m going to show you how you can do it in four steps. The idea is to change the type of input from text to password, then password to text when you click the label.

Step 1

Let’s start by creating an input tag with a password as the type of input.

Step 2

Use the useState() react hook to determine if the password in the input field should be shown, using a boolean state called passwordShown.

As a first step, let’s give the initial boolean state value of false, as we don’t want the password input field to appear when the user tries to enter the password. Users should only see them when they click on the Show Password button.

Step 3

By now, instead of hardcoding the password in the input tag, we need to make it dynamic, so that if the passwordShown boolean state is true, the password will be shown, and if it is false, the password will not be shown.

Step 4

Now, Let’s attach an onClick handler to a tag so that when the user clicks the link it should display the password.

In step3, I explain to you how to make the link text dynamic instead of hard-coded.

That’s all! 😃. We have made a working Show/Hide password toggle. Thanks for reading!
you can also read this article on medium https://atefe-dev.medium.com/create-a-show-hide-password-toggle-button-in-reactjs-68b6b840e31b

Creating Protected Routes With React Router V6

Atefeh Mohammaddoust — Fri, 01 Jul 2022 10:21:31 +0000

Hey, if you’re looking to find out how to create a Private Route in Reactjs, I’m going to show you how you can do it in only 2 steps. This approach is actually very clean and makes our component much simpler.

The idea is that a user must first meet certain requirements to access that route. In this case, the dashboard page can only be accessed by logged-in users

Step 1

Let’s start by creating a Component, and we call it . we can pass in more than one route inside of this component. The allows the Users component to render its child routes.

Step 2

we would simply pass in to a , and then nest all the components that we want to be private inside of this route.

that’s it 😄, Any developer who is looking forward to learning React or even the ones who have been using React for a while should be able to use and enjoy the stuff in this article!! 😄

The article has also been published in https://atefe-dev.medium.com/creating-protected-routes-with-react-router-v6-95498195128b