Installation Instructions

note

If you're using a JS framework such as next.js, check out the detailed instructions for it. The instructions below should work for most setups though.

Shortcut: CRA template

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

yarn create react-app --template kea-typescript my-kea-app

cd my-kea-app

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, optionally call resetContext and wrap your app with a <Provider /> tag.

1. Install some packages

In addition to kea you will also need redux, react-redux and reselect.

# if you're using yarn

yarn add kea redux react-redux reselect

# if you're using npm

npm install kea redux react-redux reselect --save

2. Set up 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.

To set it up, just call resetContext(options) before rendering your app.

3. Wrap with <Provider />

Then wrap your <App /> with <Provider />.

This is how your index.js would look like if you used create-react-app:

import React from 'react'

import ReactDOM from 'react-dom'

import { resetContext, Provider } from 'kea' // 👈 add this

import './index.css'

import App from './App'

resetContext({ // 👈 add this

createStore: {

// options for redux (e.g. middleware, reducers, ...)

},

plugins: [

// additional kea plugins

],

})

ReactDOM.render( // 👈 and update this

<Provider>

<App />

</Provider>,

document.getElementById('root')

)

That's it! Feel free to use kea() calls anywhere in your code!

4. TypeScript support

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

First, run the following:

yarn add kea-typegen concurrently --dev

Then add the following to your .gitignore:

# kea

*Type.ts

Finally, change your start script in package.json

{

"scripts": {

"start": "concurrently \"yarn start:app\" \"yarn start:kea\" -n APP,KEA -c blue,green",

"start:app": "react-scripts start # put your old 'start' script here",

"start:kea": "kea-typegen watch"

}

}

Read more about TypeScript Support in Kea.

Next Steps

• Read Core Concepts to get a good understanding of how Kea works and why.