Installation #

Via package manager #

Effector doesn't depend on NPM, you can use any package manager you want.
For example: yarn, pnpm.

npm add effector

React #

npm add effector effector-react

Also, you can start from Stackblitz template with TypeScript, ViteJS, and React already set up.

Vue #

npm add effector effector-vue

Solid #

npm add effector effector-solid

Svelte #

Svelte works with effector out of the box, no additional packages needed.

Online playground #

Examples in this documentation are running in our online playground, which allows someone to test and share ideas quickly, without install. Code sharing, Typescript and react supported out of the box. Project repository.

Deno #

Just import effector.mjs from any CDN.

import {createStore} from 'https://cdn.jsdelivr.net/npm/effector/effector.mjs'

Sample CDNS:

• https://www.jsdelivr.com/package/npm/effector
• https://cdn.jsdelivr.net/npm/effector/effector.cjs.js
• https://cdn.jsdelivr.net/npm/effector/effector.mjs
• https://cdn.jsdelivr.net/npm/effector-react/effector-react.cjs.js
• https://cdn.jsdelivr.net/npm/effector-vue/effector-vue.cjs.js

DevTools #

Use effector-logger for printing updates to console, displaying current store values with browser ui and connecting application to familiar redux devtools.

For server-side rendering and writing test you may need plugins for your compiler toolkit:

Babel #

To use Babel-plugin you don't need to install additional packages, plugin bundled to effector package.

Read this for more details.

SWC #

npm add --development @effector/swc-plugin @swc/core

Documentation.

Compatibility #

The library provides separate modules with compatibility up to IE11 and Chrome 47 (browser for Smart TV devices): effector/compat, effector-react/compat and effector-vue/compat

Usage with manual import replacement:

- import {createStore} from 'effector'
+ import {createStore} from 'effector/compat'

Usage with babel-plugin-module-resolver in your .babelrc:

{
  "plugins": [
    [
      "babel-plugin-module-resolver",
      {
        "alias": {
          "^effector$": "effector/compat",
          "^effector-react$": "effector-react/compat"
        }
      }
    ]
  ]
}

Polyfills #

You need to install polyfills for these objects:

• Promise
• Object.assign
• Array.prototype.flat