@mirohq/websdk-react-hooks

miro-websdk-react-hooks

Collection of React hooks to interact with Miro Platform WebSDK.

Use it!

$ npm install @mirohq/websdk-react-hooks
// or
$ yarn add @mirohq/websdk-react-hooks

Inject Miro instance

Wrap your components with MiroProvider and inject the global instance of Miro WebSDK.

import { MiroProvider } from "@mirohq/websdk-react-hooks";

const App: React.FC = ({ children }) => <MiroProvider miro={window.miro}>{children}</MiroProvider>;

Make sure you have a Miro application configured to use it:

Hooks

• useMiro - Access Miro SDK reference from React Context.
• useCurrentUser - Get current Miro user.
• useInfo - Get Miro board info.
• useOnlineUsers - Get online users in a Miro board.
• useSelectedItems - List selected items with possible predicate filter.
• useSession - Interact with Miro session.
• useStorage - Interact with Miro storage.
• useViewport - Interact with Miro viewport.

Built with

• Miro Platform WebSDK
• React
• Typescript
• Jest
• React testing library

Contributing

Please refer to the CONTRIBUTING.md guide to get started.

Changelog

0.0.1 (2023-12-08)

Features

• 🎸 introduces hook useSession (#5) (edd60c4)
• 🎸 introduces useStorage hook (#4) (553f844)
• 🎸 introduces useViewport (#3) (8def41f)
• 🎸 introduces useMiro (#3) (8def41f)
• 🎸 introduces useCurrentuser (#3) (8def41f)
• 🎸 introduces useInfo (#3) (8def41f)
• 🎸 introduces useOnlineUsers (#3) (8def41f)
• 🎸 introduces useSelectedItems (#3) (8def41f)