In this article, we are going to show you how to create a toggle switch in react using css.

Let’s begin by creating a Toggle component in react:

• The Toggle component has an input element with the type “checkbox”. We also give it an id so we can associate it with the label below.
• The label takes in a htmlFor attribute which corresponds to the id of the checkbox.
• Clicking on the label will also toggle the checkbox because of htmlFor

CSS Styles

For the css style we will hide the checkbox. We still keep it in the DOM since we…

In this article, we will show you how to create global state using createGlobalState, a function we built. If you are interested in how this function is implemented in more detail go to this article.

Intro

In some cases, two components that are not located close to each other in your react component tree need to share and modify data. For example Layout and UserPosts:

This component tree is simple enough to pass components down via props, but what if the components are not directly connected in a straight line? Like the SidePanel and UserPosts:

In this article, we will show you how to build a reusable function that lets you create a global state. If you are only interested in how to use it and not the implementation details, jump over to this article.

Intro

In some cases, two components that are not located close to each other in your react component tree need to share and modify data. For example Layout and UserPosts:

This component tree is simple enough to pass components down via props, but what if the components are not directly connected in a straight line? Like the SidePanel and UserPosts: