✨ Generated with create-robo magic! ✨

---

@robojs/sync

Real-time state sync across clients the simplest way possible. Perfect for multiplayer games and chat apps. It's like magic, but real! 🎩✨

``ts
const [position, setPosition] = useSyncState({ x: 0, y: 0 }, [channelId])
`

It works exactly like React's useState, but it syncs the state across all clients in real-time using websockets, sharing the same state across all clients with the same dependency array. (In this case, [channelId])

No more manual websocket handling or state synchronization. Just focus on building your app and let @robojs/sync handle the rest. It works out of the box as long as you also have the @robojs/server plugin installed.

➞ 📚 Documentation: Getting started

➞ 🚀 Community: Join our Discord server

Installation 💻

To install this plugin, navigate to your existing Robo project's directory and run the following command:

`bash
npx robo add @robojs/sync
`

> Note: You will also need to install the @robojs/server.

That's it! You can now start using useSyncState in your project. Just wrap your App component with the SyncContextProvider and you're good to go!

`tsx
import { SyncContextProvider } from '@robojs/sync'

export function App() {
return (



)
}
`

Usage 🎨

Here's a simple example of how you can use useSyncState in your project to share the mouse position across all clients:

`tsx
import { useSyncState } from '@robojs/sync'
import { useDiscordSdk } from '../hooks/useDiscordSdk'

export function Player() {
const { session } = useDiscordSdk()
const [position, setPosition] = useSyncState({ x: 0, y: 0 }, ['position'])

const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY })
}

return (
onMouseMove={handleMouseMove}
style={{
width: '100vw',
height: '100vh'
}}
>
style={{
position: 'absolute',
left: position.x,
top: position.y
}}
>
Player