React hooks for interacting with session backends and the Jamsocket platform.
Read the docs here
npm install @jamsocket/reactHere's an example of how different parts of Jamsocket's client libraries work together.
import Jamsocket from '@jamsocket/server'
const jamsocket = Jamsocket.init({
account: '[YOUR ACCOUNT]',
token: '[YOUR TOKEN]',
service: '[YOUR SERVICE]',
// during develpment, you can simply pass { dev: true }
})
const spawnResult = await jamsocket.spawn() // returns an instance of SpawnResultimport { type SpawnResult, SessionBackendProvider, useReady } from '@jamsocket/react'
function Root() {
return(
<SessionBackendProvider spawnResult={spawnResult}>
<MyComponent sessionBackendUrl={spawnResult.url} />
</SessionBackendProvider>
)
}
function MyComponent({ sessionBackendUrl }) {
const ready = useReady()
useEffect(() => {
if (ready) {
// make a request to your session backend
fetch(sessionBackendUrl)
}
}, [ready])
return ready ? <MyChildren /> : <Spinner />
}Wrap the root of your project with the SessionBackendProvider so that the children components can utilize the React hooks.
The SessionBackendProvider must be used in conjunction with @jamsocket/server in order to access the spawn result returned by the spawn function.
import { SessionBackendProvider, type SpawnResult } from '@jamsocket/react'
export default function HomeContainer({ spawnResult }: { spawnResult: SpawnResult }) {
return (
<SessionBackendProvider spawnResult={spawnResult}>
<Home />
</SessionBackendProvider>
)
}Is a React hook that returns a boolean that is true if the session backend is ready.
import { useReady } from '@jamsocket/react'
const isReady = useReady()The @jamsocket/react package also re-exports all of the @jamsocket/client package's exports, including classes and types.