Installation

Via package manager

Effector doesn’t depend on NPM, you can use any package manager you want.

npm install effector

yarn install effector

pnpm install effector

Supported Frameworks

Additionally, to ensure proper integration with popular frameworks, you can also install an additional package.

npm install effector effector-react

npm install effector effector-vue

npm install effector effector-solid

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

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 install -ED @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

Effector uses some APIs and objects that older browsers may not have, so you may need to install them yourself if you intend to support such browsers.

You may need to install the following polyfills:

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