With your coding agent

First install Data Client's skills for your coding agent. Without them, agents get the basics right but miss the rest, like real-time managers and test fixtures.

Claude Code plugin

claude plugin marketplace add reactive/data-client
claude plugin install react@data-client

Skills CLI

npx skills add reactive/data-client \
  --skill data-client \
  --skill data-client-setup \
  --skill data-client-rest-setup \
  --skill data-client-endpoint-setup \
  --skill data-client-graphql-setup \
  --skill data-client-schema \
  --skill data-client-rest \
  --skill data-client-manager \
  --skill data-client-react \
  --skill data-client-react-testing

OpenSkills

npx openskills install reactive/data-client/.agents/skills/data-client
npx openskills install reactive/data-client/.agents/skills/data-client-setup
npx openskills install reactive/data-client/.agents/skills/data-client-rest-setup
npx openskills install reactive/data-client/.agents/skills/data-client-endpoint-setup
npx openskills install reactive/data-client/.agents/skills/data-client-graphql-setup
npx openskills install reactive/data-client/.agents/skills/data-client-schema
npx openskills install reactive/data-client/.agents/skills/data-client-rest
npx openskills install reactive/data-client/.agents/skills/data-client-manager
npx openskills install reactive/data-client/.agents/skills/data-client-react
npx openskills install reactive/data-client/.agents/skills/data-client-react-testing

Then tell your agent:

Copy prompt for your coding agent

Install manually

NPM

npm install --save @data-client/react @data-client/test @data-client/rest

Yarn

yarn add @data-client/react @data-client/test @data-client/rest

pnpm

pnpm add @data-client/react @data-client/test @data-client/rest

esm.sh

<script type="importmap">
{
  "imports": {
    "@data-client/react": "https://esm.sh/@data-client/react",
    "@data-client/test": "https://esm.sh/@data-client/test",
    "@data-client/rest": "https://esm.sh/@data-client/rest"
  }
}
</script>

Add provider at top-level component

Web

index.tsx

import { DataProvider } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.body).render(
  <DataProvider>
    <App />
  </DataProvider>,
);

Alternatively integrate state with redux

React Native

index.tsx

import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

const Root = () => (
  <DataProvider>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

Alternatively integrate state with redux

NextJS

Full NextJS Guide

app/layout.tsx

import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';

export default function RootLayout() {
  return (
    <DataProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

Anansi

Anansi (beta) is a fully composable framework for React development with optional Server Side Rendering.

bash

npx @anansi/cli hatch my-project

Anansi includes Reactive Data Client automatically.

Your coding agent can also load the skills these packages ship, matched to the version you installed, with TanStack Intent:

npm install -D @tanstack/intent
npx intent install

Next: Define Data »

Example

Explore the todo-app example

Open in StackBlitzView source

Loading demo…

More Demos

Supported Tools

TypeScript 4.0+

TypeScript is optional, but requires at least version 4.0 and strictNullChecks for full type enforcement.

Older browser support

If your application targets older browsers (a few years or more), be sure to load polyfills. Typically this is done with @babel/preset-env useBuiltIns: 'entry', coupled with importing core-js at the entrypoint of your application.

This ensures only the needed polyfills for your browser support targets are included in your application bundle.

For instance TypeError: Object.hasOwn is not a function

Internet Explorer support

If you see Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', follow the instructions to add legacy browser support to packages

ReactJS 16-19 and React Native

ReactJS 16.2 and above is supported (the one with hooks!). React 18 provides improved Suspense support and features. Both React Native, React Navigation and Expo are supported.

If you have a working project using other React libraries, feel free to share with others in our discussions.