Image for post
Image for post

Sidebar component

For the impatient, the source code is here.

Let’s being by laying our sidebar component. The structure is pretty straight forward:

Believe it or not but designers call the three horizontal bars as a hamburger button.


Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Codegem

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