Build an Easy Popin System With React

Demystifying the way to create a simple, customisable and accessible popin system with React

For non-members, please click here to continue reading.

Concerns about existing systems

There are plenty of popin systems out there, but they usually don’t meet the high-quality requirement I have on user interfaces and development simplicity.

When I’m adding a popin into a website, it is important to me that the system is:

• Simple to use: as a developer, I don’t want to spend time creating tons of components, tons of states just to activate popup. A developer better spend his time on the domain specificities rather than brainless tasks
• Customisable: this is usually my main point of complexity since popin system are almost always shipped with styled-components, making it harder to make them look as close as your UI Designer has imagined them.
• Accessible: Accessibility is usually stepped aside from the systems because it asks for more work, even if it doesn’t need that much work on it.

These requirements acted, I always find it difficult to find a library with what I need and the blocking points are often too painful to be worked around.

Even if it might not be intuitive, the last standing option is to create our own system, so that will ensure a perfect match with our needs

Enough speaking, let’s dive in a popin component system creation.

What Are We Building

There are a few things we want in this popup system:

• A custom modal component that will be in charge of the popin style, including background, position, and a closing button
• An easy-to-use modal component with a simple toggle system that will be in charge of the functional part of the popin.
• A transitional state to make the CSS modal softly appearing
• Support for people having a browser with the motion reducing activated
• Handling accessibility on the modal to tell people with disabilities the popup has appeared and…