Skip to content

Commit

Permalink
update readme (#1735)
Browse files Browse the repository at this point in the history
* update readme

* fix(website): move redirects to Vercel config

* update readme

* update readme and introduction

* update introduction

* fix(website): revise redirects

* update introduction
  • Loading branch information
sandren authored Feb 3, 2023
1 parent 0c195b0 commit dae4418
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 83 deletions.
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
}

1 comment on commit dae4418

@vercel
Copy link

@vercel vercel bot commented on dae4418 Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.