Installation

NPM

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

Yarn

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

esm.sh

<script type="module">
  import * from 'https://esm.sh/@data-client/react';
  import * from 'https://esm.sh/@data-client/test';
  import * from 'https://esm.sh/@data-client/hooks';
  import * from 'https://esm.sh/@data-client/rest';
</script>

Add provider at top-level component

React Web 16+

index.tsx

import { CacheProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <CacheProvider>
    <App />
  </CacheProvider>,
  document.body,
);

Alternatively integrate state with redux

React Web 18+

index.tsx

import { CacheProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

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

React Native

index.tsx

import { CacheProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';

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

Alternatively integrate state with redux

NextJS

npm install --save @data-client/ssr @data-client/redux redux

Full NextJS Guide

pages/_document.tsx

import { DataClientDocument } from '@data-client/ssr/nextjs';

export default DataClientDocument;

pages/_app.tsx

import { AppCacheProvider } from '@data-client/ssr/nextjs';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppCacheProvider>
      <Component {...pageProps} />
    </AppCacheProvider>
  );
}

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.

Next: Define Data »

Example

More Demos

Supported Tools

TypeScript 3.7+

TypeScript is optional, but requires at least version 3.7 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+ 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 and React Navigation are supported.

Other native frameworks like Expo should work, but have not been verified. If you have a working project using other React libraries, feel free to share with others in our discussions.