React Hook for Query String State Management

On a current project, we wanted to hoist page state out of a useReducer hook into a query string of the URL. We saw this as a continual need for the project going forward, so we wanted a convenient way to build new pages that stored their state in the URL’s query string. To do […]

Intuitive React Integer Input

Input fields are some of the most fundamental aspects of any application, and front-end validation is expected these days. Unfortunately, doing even simple validation is often more complicated than many clients expect.

Solving Nested Navigation in React with TypeScript

On a recent project, we needed to support multi-level tab bar navigation within our application. With multiple variations of tab bars, each page needed to know which tabs to show. We found that TypeScript offered a good solution.

Using React Storybook to Tackle Complex Multipart Stories

Often, when developing a new React component for a web app, I find myself with lots to do. For example, I may need to add a Redux container, API endpoint, some Redux actions, and the UI of the component. These tasks are all interconnected and interdependent, so it’s difficult to know where to start and […]

Redux Thunk Best Practices for Loading Initial Data

Every application needs to handle a couple of tasks: loading initial data for users and determining what page or screen they land on. Despite being order-dependent, this logic is often scattered into various parts of the application. This can lead to subtle bugs and makes it hard to answer simple questions like, “What will the […]

Three React Native Libraries I Can’t Live Without

As I wrap up my current project, a React Native app, my team has been thinking a lot about what went right and what went wrong when using the framework. Since it’s a pretty lightweight framework, we brought in a lot of external libraries to help us build our app. Besides some always-useful libraries, such […]

A Pattern for Redux Thunk Async Actions

Redux is a powerful tool for structuring front-end logic, and Redux Thunk extends its capabilities to support asynchronous actions in a simple way. However, without a clear, consistent, and reusable pattern to follow, it’s easy for a team to write Thunk actions in different ways and add mental strain to understanding the codebase.

CSS-Animated Countdown Timer with React and TypeScript

A while ago, on an old project, we needed to implement a countdown timer. The specified design looked relatively simple: an outline of a circle with the number of seconds remaining inside. As the time counted down, the text would need to update, and the stroke around the circle would need to disappear at an […]

Combining Redux & Apollo Containers

Redux and Apollo are popular implementations of Flux architecture and GraphQL respectively. A common pattern is to make a GraphQL query with data from the Redux state. If the state value changes, Apollo should re-run the query and the new data should be reflected in the UI.

Atomic Spin

Atomic Object’s blog on everything we find fascinating.

React / Redux