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.

We have the hamburger button separated from the actual side bar since it will be laid out on a nav bar, unlike the sidebar which will have a fixed position.

Inside the sidebar we have a close button and the content, which can be anything you want.

Adding State

We add isOpen state to the side bar, a function toggleSideBar which when called will switch isOpen from true to false and vice versa.

isOpen will also influence the css class we assign to the side bar.

• If true we assign .SideBar.Active (open)
• If false we simply assign .SideBar (closed)

The CSS

Make the .SideBar position fixed and its height of 100 view port height. Make sure the z-index is 3 or more so the side bar is not buried under any elements on the page.

The transition attribute is what will make css animate the position from left: -100% to left: 0%, when we change the class (see css class .Sidebar.Active below):

When the sidebar is active, its left position is 0% meaning its open:

When we change the class, css triggers an animation so the change is smooth (all thanks to the transition attribute)

Bonus round: You can also make your close button stick to the top left side of your sidebar so it is aligned with the hamburger button. We also give it a nice scaling animation when we hover over it:

Result

Look at what we’ve created together, isn’t this beautiful?

Can anything be improved? Did we miss anything? Give us your thoughts in the comments!

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 can use it in the css to check its state (on/off) using the :checked selector:

The .Toggle class styles the label, and the .Circle class styles the span:

The .Circle class is made round by keeping the width, height and border-radius the same size. The transition attribute will animate the change in position when we switch css classes.

And the most important part is the style below. When the hidden .CheckBox is checked (on) css will look from the next html tag in DOM with the .Circle class and style it as below. This style will move the circle to the right, using `left` attribute:

When the .CheckBox is not checked, css will simply use the .Circle class and this will trigger the transition attribute to animate the change.

Result

We have it working 🎉

For the full code checkout our github page.

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:

Redux is a possible fix to this problem but it has plenty of boilerplate and has a steep learning curve especially when not familiar with functional programming. In this article, we discuss how to implement a global state that can be both shared and modified.

Create Global State

Create a new file named globalState.tsx and copy the code below (implementation details can be found here):

The code above creates a context and a context provider wrapper that lets us create a state object that can be modified and shared.

Let’s say you want to modify user posts in one part of your app and you want to display them in another. Here is a react component tree example:

First, we need a new file to store the global state. Let’s call it userPostsState.ts. To create a state, we call createGlobalState which returns a pair. The first value is a react context (which we can use in a component by calling useContext(...)) and the second value is a context provider which is used to wrap a react component, in this case the Layoutcomponent. createGlobalState takes in a type (in brackets) and a default value, in this case the type is a UserPostsModel array and the default value is an empty array. Export both UserPostsContext and userPostsProvider, which are the only two things we need:

Find the top most component that is a parent to both AddUserPost and UserPosts (see diagram above). In this case, it is the Layout component, and wrap it withuserPostsProvider (so its children have access to the state):

The component AddUserPosts has a button that adds posts. We can use UserPostsContext with useContext like so:

Same thing goes for UserPosts, we also use UserPostsContext to display posts:

And we are done! Any time a post is added in AddUserPost it automatically updates UserPosts to reflect that.

Summary

To create global state you have to follow those steps:

1. Use createGlobalState with the default value and export the tuples
2. Wrap the topmost component, that is a parent of the components that need access to the data, with the provider
3. Use the context returned by createGlobalState with useContext in a component you need to get and modify the state.

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:

Redux is a possible fix to this problem. Although it has plenty of boilerplate and has a steep learning curve especially when not familiar with functional programming. In this article, we discuss how to implement a global state that can be both shared and modified.

This tutorial includes Typescript, Higher Order Components, Functional Components, Generics and React Hooks.

App Overview

We start with a simple web app that has a header, a side panel, and the main content area with user posts:

You can find the source code here. There are three different branches between which you can switch:

• master: this branch contains the app without any state
• 1_simple_context: a simple implementation of the context and its provider wrapper (see Part 1 below)
• 2_bidirectional_context: the provider wrapper holds state and can pass it down to its children to modify (see Part 2)
• 3_generalized_context: refactored version of 2_bidirectional_context to be more generic and reusable (see Part 3)

The side panel has a toggle (show blue posts) that hides or shows blue posts in the main content. The toggle has to communicate with the main content but this might be messy since the structure of the component tree looks like this:

Part 1 — Simple One-way Context

The most common ancestor between the SidePanel and the Content is the component Layout. We can wrap Layout in a context provider that will pass down a boolean value to all its children:

First, we create the context using React’s API nothing too fancy yet:

Next is the context provider wrapper, which is a Higher Order Component that simply wraps any Component we pass to it with BluePostsContext:

We connect the context to the Layout component by simply wrapping its export with bluePostsProvider (notice here we have to provide the prop type of Layout since typescript doesn't recognize it):

The SidePanel and the UserPosts can have access to data in the context using the useContext hook API:

Components nested in the Layout component have access to this boolean value but none of them can modify it. In the second part, we show how to allow nested components to modify the context value by storing state in the provider.

Part 2 — Bidirectional state

For the children of Layout to modify the boolean value, the provider has to hold state:

To add state to the provider we simply use useState. The context now should hold the value returned by useState and pass it down to all children. Keep in mind we are now passing around a boolean value wrapped in react state:

The type returned by useState(true) is a pair [boolean, React.Dispatch<React.SetStateAction<boolean>>], and it is exactly the type the Context is holding. Since createContext is generic it needs to know about this type by passing it into angle brackets (<>). The default value can be anything since it is just a placeholder until the provider initializes useState. But in order to type-check we simply use [true, value => { }] as the default value:

The Layout component stays the same, but Panel.tsx and UserPosts.tsx change, since the context now returns a react state and not just a boolean variable. The only change here is to the left-hand side, it is now a pair much like what useState returns:

Here is the result:

In a sense now useContext(BluePostsContext) behaves like a simple useState(true) but on a global scale! We can still improve upon this design since now you might be thinking what if I want to send a string instead of a boolean, or an array, or an object? We would have to copy the context and the provider wrapper again. To avoid that we make the context code generic and reusable in Part 3.

Part 3 — A) Generalize global state

Let’s recap, now our context.tsx looks like this:

It is time to make this code reusable, so we will copy it over to a new file named globalState.tsx and combine both of these functions into another function called createGlobalState:

We change the name of BluePostsContext to GlobalContext and bluePostsProvider to globalProvider:

createGlobalStateneeds to return GlobalContext and globalProvider, we can return them both as a tuple. If we simply return return [GlobalContext, globalProvider], Typescript will think that we are returning an array of two elements. To fix this issue we add a helper method called Pair and wrap the tuple with it to typecheck:

The boolean type is hardcoded above so we need to make it generic by replacing it with a generic type parameter T:

Instead of injecting the default value through the provider function, we can inject it right away into the createGlobalState function:

And we are done! This is the function that is going to be reused anytime we need a global state.

Part 3 — B) Using the new code

Since we have the new generic code in globalState.tsx we do not need to ever modify that function, we only need to import it whenever we need to create a global state. The contextBluePostsContext in context.tsx simplifies to a one-liner:

Now any time you need a global state it is as easy as calling createGlobalState with a default value! It returns a regular React context that can be used in useContext and a provider that wraps the top component.

Conclusion

Now a word about state management. Overusing this method might lead to some complex state logic that will be hard to debug especially with larger codebases and teams. It is by no means a replacement for Redux or other state management libraries so use it sparingly throughout your codebase. And remember, whenever you can use local state, do so!