Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update readme #1735

Merged
merged 7 commits into from
Feb 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions docs/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,15 @@ description: Table of contents
nav: 0
---

Welcome to the Jotai documentation! Jotai is a primitive and flexible state management library for React.

It takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for memoization.
Welcome to the Jotai v2 documentation! Jotai's atomic approach to global React state management scales from a simple `useState` replacement to an enterprise application with complex requirements.

## Features

- Minimal API
- Minimal core API (2kb)
- Many utilities and integrations
- TypeScript oriented
- Tiny core bundle size (2kb)
- Many extra utilities and integrations
- Supports Next.js, Gatsby, Remix, and React Native
- Great developer experience with React Fast Refresh
- Works with Next.js, Gatsby, Remix, and React Native
- React Fast Refresh with SWC and Babel plugins

## Core

Expand All @@ -25,7 +22,7 @@ Jotai has a very minimal API, exposing only a few exports from the main `jotai`

## Utilities

Jotai also includes a `jotai/utils` bundle with a variety of extra utility functions. One example is `atomWithStorage`, which includes localStorage persistence and browser tab synchronization.
Jotai also includes a `jotai/utils` bundle with a variety of extra utility functions. One example is `atomWithStorage`, which includes localStorage persistence and cross browser tab synchronization.

<TOC section="utilities" />

Expand All @@ -37,7 +34,7 @@ Jotai has separate bundles for many official integrations including `atomWithQue

## Tools

There are also SWC and Babel compiler plugins for React Fast Refresh support and debugging labels to provide the best developer experience when using Jotai in a React framework such as Next.js or Gatsby.
There are also SWC and Babel compiler plugins for React Fast Refresh support and debugging labels. This creates the best developer experience when using Jotai with a React framework such as Next.js or Gatsby.

<TOC section="tools" />

Expand Down
78 changes: 12 additions & 66 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<br>

`npm i jotai` or visit [jotai.org](https://jotai.org)
visit [jotai.org](https://jotai.org) or `npm i jotai`

[![Build Status](https://img.shields.io/github/actions/workflow/status/pmndrs/jotai/lint-and-type.yml?branch=main&style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/jotai/actions?query=workflow%3ALint)
[![Build Size](https://img.shields.io/bundlephobia/minzip/jotai?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=jotai)
Expand All @@ -14,17 +14,14 @@
[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)
[![Open Collective](https://img.shields.io/opencollective/all/jotai?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/jotai)

Jotai is pronounced "joe-tie" and means "state" in Japanese.
Jotai scales from a simple useState replacement to an enterprise TypeScript application.

You can try live demos in the following:
[Demo 1](https://codesandbox.io/s/jotai-demo-47wvh) |
[Demo 2](https://codesandbox.io/s/jotai-demo-forked-x2g5d).
- Minimal core API (2kb)
- Many utilities and integrations
- No string keys (compared to Recoil)

#### How does Jotai differ from Recoil?

- Minimalistic API
- No string keys
- TypeScript oriented
Examples: [Demo 1](https://codesandbox.io/s/jotai-demo-47wvh) |
[Demo 2](https://codesandbox.io/s/jotai-demo-forked-x2g5d)

### First create a primitive atom

Expand Down Expand Up @@ -72,8 +69,6 @@ function DoubleCounter() {
}
```

## Recipes

### Creating an atom from multiple atoms

You can combine multiple atoms to create a derived atom.
Expand Down Expand Up @@ -165,57 +160,8 @@ function Controls() {
...
```

## Learn Jotai

[![free egghead Jotai introduction course by Daishi](./img/jotai-course-banner.jpg)](https://egghead.io/courses/manage-application-state-with-jotai-atoms-2c3a29f0?utm_source=github&utm_medium=cta&utm_term=jotai)

## More documents

- Core
- [atom](./docs/core/atom.mdx)
- [useAtom](./docs/core/use-atom.mdx)
- [Store](./docs/core/store.mdx)
- [Provider](./docs/core/provider.mdx)
- Utilities
- [Storage](./docs/utilities/storage.mdx)
- [SSR](./docs/utilities/ssr.mdx)
- [Async](./docs/utilities/async.mdx)
- [Resettable](./docs/utilities/resettable.mdx)
- [Family](./docs/utilities/family.mdx)
- Integrations
- [tRPC](./docs/integrations/trpc.mdx)
- [Query](./docs/integrations/query.mdx)
- [URQL](./docs/integrations/urql.mdx)
- [Immer](./docs/integrations/immer.mdx)
- [XState](./docs/integrations/xstate.mdx)
- [Location](./docs/integrations/location.mdx)
- [Cache](./docs/integrations/cache.mdx)
- [Molecules](./docs/integrations/molecules.mdx)
- [Optics](./docs/integrations/optics.mdx)
- Tools
- [SWC](./docs/tools/swc.mdx)
- [Babel](./docs/tools/babel.mdx)
- [Devtools](./docs/tools/devtools.mdx)
- Basics
- [Concepts](./docs/basics/concepts.mdx)
- [Comparison](./docs/basics/comparison.mdx)
- [Showcase](./docs/basics/showcase.mdx)
- Guides
- [v2 API migration](./docs/guides/migrating-to-v2-api.mdx)
- [TypeScript](./docs/guides/typescript.mdx)
- [Next.js](./docs/guides/nextjs.mdx)
- [Gatsby](./docs/guides/gatsby.mdx)
- [Remix](./docs/guides/remix.mdx)
- [React Native](./docs/guides/react-native.mdx)
- [Debugging](./docs/guides/debugging.mdx)
- [Performance](./docs/guides/performance.mdx)
- [Testing](./docs/guides/testing.mdx)
- [Core internals](./docs/guides/core-internals.mdx)
- [Composing atoms](./docs/guides/composing-atoms.mdx)
- [Atoms in atom](./docs/guides/atoms-in-atom.mdx)
- [Initializing state on render](./docs/guides/initialize-atom-on-render.mdx)
- [Persistence](./docs/guides/persistence.mdx)
- Recipes
- [Large objects](./docs/advanced-recipes/large-objects.mdx)
- [Atom creators](./docs/advanced-recipes/atom-creators.mdx)
- [Custom useAtom hooks](./docs/advanced-recipes/custom-useatom-hooks.mdx)
## Links

- [website](https://jotai.org)
- [documentation](https://jotai.org/docs)
- [course](https://egghead.io/courses/manage-application-state-with-jotai-atoms-2c3a29f0)
17 changes: 10 additions & 7 deletions website/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,18 @@ export default function HomePage() {
<div className="space-y-4">
<Headline>Introduction</Headline>
<p>
Jotai takes a bottom-up approach to global React state management with an atomic model
inspired by Recoil. One can build state by combining atoms and renders are optimized
based on atom dependency. This solves the extra re-render issue of React context and
eliminates the need for memoization.
Jotai takes an atomic approach to global React state management with a model inspired by
Recoil.
</p>
<p>
It’s scalable from a simple <InlineCode>useState</InlineCode> replacement all the way to
an enterprise TypeScript application with complex requirements. Plus there are plenty of
built-in utilities and officially maintained integrations to help you along the way!
Build state by combining atoms and renders are automatically optimized based on atom
dependency. This solves the extra re-render issue of React context and eliminates the
need for memoization.
</p>
<p>
It scales from a simple <InlineCode>useState</InlineCode> replacement to an enterprise
TypeScript application with complex requirements. Plus there are plenty of utilities and
integrations to help you along the way!
</p>
<p>Jotai is trusted in production by teams at innovative companies like these.</p>
<LogoCloud />
Expand Down
142 changes: 142 additions & 0 deletions website/vercel.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,147 @@
"maxDuration": 30
}
},
"redirects": [
{
"source": "/docs",
"destination": "/docs/introduction",
"permanent": false
},
{
"source": "/docs/utils/:slug",
"destination": "/docs/utilities/:slug",
"permanent": false
},
{
"source": "/docs/advanced-recipes/:slug",
"destination": "/docs/recipes/:slug",
"permanent": false
},
{
"source": "/docs/api/babel",
"destination": "/docs/tools/babel",
"permanent": false
},
{
"source": "/docs/api/core",
"destination": "/docs/core/atom",
"permanent": false
},
{
"source": "/docs/api/devtools",
"destination": "/docs/tools/devtools",
"permanent": false
},
{
"source": "/docs/api/devtools",
"destination": "/docs/tools/devtools",
"permanent": false
},
{
"source": "/docs/api/swc",
"destination": "/docs/tools/swc",
"permanent": false
},
{
"source": "/docs/api/utils",
"destination": "/docs/tools/introduction",
"permanent": false
},
{
"source": "/docs/utils/atom-family",
"destination": "/docs/utilities/family",
"permanent": false
},
{
"source": "/docs/utils/atom-with-default",
"destination": "/docs/utilities/resettable",
"permanent": false
},
{
"source": "/docs/utils/atom-with-hash",
"destination": "/docs/integrations/location",
"permanent": false
},
{
"source": "/docs/utils/atom-with-observable",
"destination": "/docs/utilities/async",
"permanent": false
},
{
"source": "/docs/utils/atom-with-reducer",
"destination": "/docs/utilities/reducer",
"permanent": false
},
{
"source": "/docs/utils/atom-with-reset",
"destination": "/docs/utilities/resettable",
"permanent": false
},
{
"source": "/docs/utils/atom-with-storage",
"destination": "/docs/utilities/storage",
"permanent": false
},
{
"source": "/docs/utils/freeze-atom-creator",
"destination": "/docs/tools/devtools",
"permanent": false
},
{
"source": "/docs/utils/freeze-atom",
"destination": "/docs/tools/devtools",
"permanent": false
},
{
"source": "/docs/utils/loadable",
"destination": "/docs/utilities/async",
"permanent": false
},
{
"source": "/docs/utils/reset",
"destination": "/docs/utilities/resettable",
"permanent": false
},
{
"source": "/docs/utils/select-atom",
"destination": "/docs/utilities/select",
"permanent": false
},
{
"source": "/docs/utils/split-atom",
"destination": "/docs/utilities/split",
"permanent": false
},
{
"source": "/docs/utils/use-atom-callback",
"destination": "/docs/utilities/callback",
"permanent": false
},
{
"source": "/docs/utils/use-atom-value",
"destination": "/docs/core/use-atom",
"permanent": false
},
{
"source": "/docs/utils/use-hydrate-atoms",
"destination": "/docs/utilities/ssr",
"permanent": false
},
{
"source": "/docs/utils/use-reducer-atom",
"destination": "/docs/utilities/reducer",
"permanent": false
},
{
"source": "/docs/utils/use-reset-atom",
"destination": "/docs/utilities/resttable",
"permanent": false
},
{
"source": "/docs/utils/use-update-atom",
"destination": "/docs/core/use-atom",
"permanent": false
}
],
"trailingSlash": false
}