Lädt...


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


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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:

  1. What is Jotai?
  2. Jotai usage example.
  3. Jotai configuration in Next.js
  4. How is the Jotai configured in Shadcn-ui/ui?
  5. 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.

Build shadcn-ui/ui from scratch.

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

  1. mail-list.tsx
  2. mail.tsx

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

About me:

Website: https://ramunarasinga.com/

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

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

Email: [email protected]

Reference:

  1. https://ui.shadcn.com/examples/mail
  2. https://jotai.org/
  3. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/layout.tsx
  4. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/providers.tsx#L10
  5. https://github.com/search?q=repo%3Ashadcn-ui%2Fui%20atom&type=code
  6. https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/use-mail.ts#L8
  7. https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail.tsx
  8. https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail-list.tsx
  9. https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/hooks/use-config.ts#L11
...

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


📈 97.97 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: Mail example explained.


📈 37.49 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.9


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.8


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.6


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.5


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.4


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.3


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.2


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 3.1


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.0


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 3.0


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.1


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.15


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 1.1


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.14


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 1.0


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.13


📈 35.98 Punkte
🔧 Programmierung

🔧 Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.12


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.11


📈 35.98 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.10


📈 35.98 Punkte
🔧 Programmierung

🔧 Advanced State Management: Comparing Recoil, Zustand, and Jotai


📈 34.12 Punkte
🔧 Programmierung

🔧 JOTAI(GLOBAL STATE MANGEMENT)


📈 34.12 Punkte
🔧 Programmierung

🔧 State Scope with Providers - Next.js with Jotai


📈 34.12 Punkte
🔧 Programmierung

🔧 Proper State Management 🛠 with Jotai 👻 in 30 seconds 🕖 🔥


📈 34.12 Punkte
🔧 Programmierung

🔧 Shadcn infinite scroll example


📈 30.76 Punkte
🔧 Programmierung

🔧 Next.js with Shadcn UI Progress Bar Example


📈 30.76 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: Tasks example explained.


📈 30.76 Punkte
🔧 Programmierung

🔧 shadcn-ui/ui codebase analysis: Dashboard example explained.


📈 30.76 Punkte
🔧 Programmierung

🔧 Implementing Dark Mode with React, Jotai, and Custom Hooks


📈 26.72 Punkte
🔧 Programmierung

🔧 How Jotai Was Born


📈 26.72 Punkte
🔧 Programmierung

🔧 Best and Worst Situations to Use Zustand and Jotai with Next.js


📈 26.72 Punkte
🔧 Programmierung

matomo