Installation

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tim-smart/effect-atom/llms.txt

Use this file to discover all available pages before exploring further.

​

Choose your framework

npm install @effect-atom/atom-react effect react scheduler

import { Atom, useAtomValue, useAtomSet, useAtom } from "@effect-atom/atom-react"

npm install @effect-atom/atom-vue effect vue

import { Atom, useAtomValue, useAtomSet, useAtom } from "@effect-atom/atom-vue"

npm install @effect-atom/atom-solid effect solid-js

import { Atom, useAtomValue, useAtomSet, useAtom } from "@effect-atom/atom-solid"

​

Optional dependencies

​

Platform packages

npm install @effect/platform @effect/platform-browser

• Atom.kvs (localStorage integration)
• AtomHttpApi (HTTP API client)
• BrowserKeyValueStore
• FetchHttpClient

​

RPC package

npm install @effect/rpc

• AtomRpc module
• RPC client atoms

​

Experimental package

npm install @effect/experimental

• Atom.withReactivity - Query invalidation
• Reactivity service integration

​

Verify installation

import { Atom, useAtomValue } from "@effect-atom/atom-react"

const testAtom = Atom.make("Hello, Effect Atom!")

export function Test() {
  const value = useAtomValue(testAtom)
  return <div>{value}</div>
}

<script setup lang="ts">
import { Atom, useAtomValue } from "@effect-atom/atom-vue"

const testAtom = Atom.make("Hello, Effect Atom!")
const value = useAtomValue(testAtom)
</script>

<template>
  <div>{{ value }}</div>
</template>

import { Atom, useAtomValue } from "@effect-atom/atom-solid"

const testAtom = Atom.make("Hello, Effect Atom!")

export function Test() {
  const value = useAtomValue(testAtom)
  return <div>{value()}</div>
}

​

TypeScript configuration

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx", // or "preserve" for Vue
    "skipLibCheck": true
  }
}

​

Next steps