React
Learn how to create realtime, stateful React applications with ActorCore’s actor model.
ActorCore is still pre-v1.0. Please help us by report bugs on GitHub Issues!
Quickstart
Create a new React project
Create a new React project with TypeScript support:
Install ActorCore packages
Navigate to your React project and install the ActorCore client and React packages:
Define your actor
Create a file actors/app.ts
in your project with your actor definition:
Build your React frontend
Now modify your src/App.tsx
file to connect to your ActorCore backend:
Start your ActorCore development server
Launch the development server with:
This will automatically start your app and open the studio in your browser. The studio supports hot-reloading, state inspection, visual RPC testing, and more debugging tools.
Start your React app
In a separate terminal, start your React app:
Your React app should now be running and connected to your ActorCore backend. Open your browser to the URL shown in the terminal (typically http://localhost:5173) to see your application.
Deploy your ActorCore app
Now that you have your project running, deploy your application to one of these platforms:
API Reference
The React integration leverages React’s hooks system to provide an idiomatic way to interact with ActorCore in React applications.
createReactActorCore
The main function that creates React hooks for interacting with ActorCore. It takes a client instance and returns hook functions.
Parameters
client
: The ActorCore client created withcreateClient
.
Returns
An object containing React hooks:
useActor
: Hook for connecting to actorsuseActorEvent
: Hook for subscribing to actor events
useActor
Hook that connects to an actor, creating it if necessary. It manages the actor connection and returns the actor handle.
Parameters
actorName
: The name of the actor to connect to (string).options
: Optional connection options (same options asclient.actorName.get()
).id
: String identifier for the actor instance.tags
: Key-value pairs for actor identification.params
: Parameters to pass during connection.noCreate
: Boolean to prevent actor creation if it doesn’t exist.
Returns
Returns an array with a single object containing:
actor
: The actor handle if connected, orundefined
if still connecting.error
: Any error that occurred during connection.isLoading
: Boolean indicating if the connection is in progress.state
: String representing the internal connection state (“init”, “creating”, “created”, or “error”).
useActorEvent
Hook that subscribes to events from an actor.
Parameters
opts
: Object containing:actor
: The actor handle fromuseActor
, or undefined.event
: The name of the event to subscribe to.
cb
: Function called when the event is fired. The arguments passed to this function depend on the event type.
Returns
This hook doesn’t return a value. The subscription is automatically managed by the hook lifecycle.