Ramu Narasinga

Posted on May 31, 2024 • Edited on Aug 11, 2024

“Mail” example in shadcn-ui/ui manages state using Jotai.

#javascript #jotai #opensource #nextjs

Since I am building shadcn-ui/ui from scratch and also documenting how to do so alongside, I am aware that it will take quite some time to understand the code and write it from scratch and prepare the content. I am not rushing the process by directly copying and pasting, instead I am trying to understand the concepts, code, patterns and strategies that can be applied in other projects. This is how I picked up that “mail” example in shadcn-ui/ui uses Jotai for state management.

In this article, you will learn the below concepts:

What is Jotai?
Jotai usage example.
Jotai configuration in Next.js
How is the Jotai configured in Shadcn-ui/ui?
How is Jotai used in Shadcn-ui/ui?

What is Jotai?

Jotai is a primitive and flexible state management library for React and is written by Daishi Kato, also the maintainer of zustand. Jotai takes an atomic approach, meaning you will create primitive and derived atoms to build state.

Jotai usage example.

Primitive atoms:



import { atom } from 'jotai'

const countAtom = atom(0)

const countryAtom = atom('Japan')

const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])

const animeAtom = atom([

  {

    title: 'Ghost in the Shell',

    year: 1995,

    watched: true

  },

  {

    title: 'Serial Experiments Lain',

    year: 1998,

    watched: false

  }

])

Derived atoms:



const progressAtom = atom((get) => {

  const anime = get(animeAtom)

  return anime.filter((item) => item.watched).length / anime.length

})

Jotai configuration in Next.js

Next.js (app directory)

Create the provider in a separate client component. Then import the provider into the root layout.js server component.



// ./components/providers.js

'use client'

import { Provider } from 'jotai'

export const Providers = ({ children }) => {

  return (

    <Provider>

      {children}

    </Provider>

  )

}

// ./app/layout.js

import { Providers } from '../components/providers'

export default function RootLayout({ children }) {

  return (

    <html lang="en">

      <body>

        <Providers>

          {children}

        </Providers>

      </body>

    </html>

  )

}

How is the Jotai configured in Shadcn-ui/ui?

apps/www/components/providers.tsx in shadcn-ui has the Jotai and the theme provider configuration as shown below:

How is Jotai used in Shadcn-ui/ui?

apps/www/app/(app)/examples/mail/use-mail.ts defines a useMail hook that is found to be later in components such as

This is one of the use cases to implement state management using Jotai in Next.s

Get free courses inspired by the best practices used in open source.

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

Reference:

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

DEV Community