Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt

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

Our client was built in vanilla javascript, and therefore its state is not able to trigger React rerenders out of the box upon mutation. But fear not, for we have a simple, lightweight solution to this problem: the react-hooks package. It provides you with the useReactiveClient hook, which wraps the client in a proxy that is ready to be used directly inside JSX.
Since our client was built with a modular approach, this package comes as a standalone, so to reduce the client’s package size.

​
Installation

Simply run the following in your terminal:
Shell
npx expo install @dynamic-labs/react-hooks

​
Using client’s state inside JSX

All you need to do is wrap your client with useReactiveClient inside your component.
This wraps the client in a proxy that keeps track of, for each render, which variables you have accessed. As soon as one of these variables’ state mutates, React automatically rerenders, and the cycle restarts. This means you only trigger rerenders for variables you are actually reading from, keeping rerenders to a minimum. 
import { createClient } from '@dynamic-labs/client';
import { useReactiveClient } from '@dynamic-labs/react-hooks'

const dynamicClient = createClient({
  environmentId: ''
});

export const useDynamic = () => useReactiveClient(dynamicClient)

import { useDynamic } from '<path to client file>';

export function Home() {
  const { auth } = useDynamic();

  return (
    <>
      <View>
        <Text>JWT:</Text>
        <Text>{auth.token}</Text>
      </View>

      <View>
        <Text>User:</Text>
        <Text>{auth.authenticatedUser?.email}</Text>
      </View>

      <Button title="Logout" onPress={() => auth.logout()} />
    </>
  )
}
You can read more about our react hooks package here.