Skip to main content

Installation

Shortcut: CRA template​

To create a new app based on kea's create-react-app typescript template, run the following:

# 2.0
yarn create react-app --template kea-typescript my-kea-app-v2
cd my-kea-app-v2
yarn start

# 3.0, until fully released
yarn create react-app --template kea-typescript@next my-kea-app-v3
cd my-kea-app-v3
yarn start

This sets up a new project with kea and kea-typegen, and adds the plugins kea-router and kea-loaders. It's the fastest way to just try out Kea.

Install Kea manually​

Installing kea is rather straightforward. You need to install some packages and optionally call resetContext.

1. Install kea​

The kea package comes bundled with everything you need to get started. It also bundles redux and reselect.

# if you're using yarn
yarn add kea

# if you're using npm
npm install kea --save

2. Optional: Reset Kea's context​

Kea stores all of its data on a context, which must be set up before any logic can be used. This context stores a reference to the redux store, initializes all plugins, caches all built logic and keeps track of what is mounted and what is not.

Kea comes with a default context already set, but to initialize custom plugins and pass advanced options, call resetContext(options) before rendering your app.

import { resetContext } from 'kea'
import { createRoot } from 'react-dom/client'

resetContext({
  plugins: [
    // additional kea plugins
  ],
})

// some time later
createRoot(document.getElementById('root')).render(<App />)

3. Disable StrictMode​

If you're using <React.StrictMode> anywhere, remove it. Kea works well with React 18 and concurrent rendering, just not with strict mode.

4. TypeScript support​

If you're using TypeScript (and everybody should), and want automatic type generation, you'll need to set up kea-typegen as well.

First, run the following:

yarn add kea-typegen concurrently --dev

Then, change your start script in package.json

{
  "scripts": {
    "start": "concurrently \"yarn start:app\" \"yarn start:kea\" -n APP,KEA -c blue,green",
    "start:app": "# put your old 'start' script here",
    "start:kea": "kea-typegen watch --write-paths"
  }
}

Read more about TypeScript Support in Kea.

Questions & Answers

Ask questions about this page here.