@hivem/react

@hivem/react

React abstractions ontop of the js client.

• exposes hooks with all the normal js work taken care of.
• all you pass is the config and start using.
• only exports these 3 interfaces,
  • if you need to do anything advanced(unlikely) - you can access the client directly to do it.
• this works with with react-native as well - the underlying ts sdk has compatibility for the sse feature.
• Updates have been made to curtail constant reactivity - especially in react native where stack based routing can cause re-instantiation effects & usecase in providers can create issues.

import { HivemProvider, useKey, useClient } from '@hivem/react';

function App() {
  // children is hidden until getAuth resolves
  // recommend you preload that, cache or server side sign & pass the auth object
  return (
    <HivemProvider 
      apiKey="FRONTEND_API_KEY"
      baseUrl="https://api.example.com"
      getAuth={async () => {
        // Your auth logic - fetch from your backend etc.
        return { identity: 'user123', signature: '...' };
      }}>
      <MyComponent />
    </HivemProvider>
  );
}

function MyComponent() {
  const { value, set, isReady, error, refresh } = useKey('my-key', {
    default: 'default-value', // optional: fallback if key not found
    debug: true // optional: log operations
  });
  // const client = useClient();

  if (isReady) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => set('new-value')}>Update</button>
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}