@100mslive/roomkit-react/src/Introduction/Integrating.stories.mdx


import { Meta } from '@storybook/addon-docs';

<Meta title="Introduction/Integrating The SDK" />

## Installing our libraries

You can use either npm or yarn to install the dependencies. Please install the respective libraries depending on whether
you're planning to use with react or other framework/plain JavaScript.

```bash
npm install --save @100mslive/hms-video-store
```

```bash
## npm
npm install --save @100mslive/react-sdk@latest
## yarn
yarn add @100mslive/react-sdk@latest
```

Via CDN:

```
https://cdn.skypack.dev/@100mslive/hms-video
https://cdn.skypack.dev/@100mslive/hms-video-store
```

## Setting up the sdk

Our core SDK can be used with plain JavaScript or any UI framework. We also provide a convenient hooks based interface
in case you're planning to integrate our SDK in a React app. Please follow the appropriate section below.

### JavaScript

There are three entities which we need to be familiar of -

- `hmsStore` - this contains the complete state of the room at any given time. This includes for example, participant details,
  messages and track states.
- `hmsActions` - this is used to perform any action such as joining, muting and sending a message.
- `hmsNotifications` - this can be used to get notified on peer join/leave and new messages in order to show toast notifications to
  the user.

Let's create a `hms.js` file where we initialize and export the above entities, so they can be used as required. We'll assume that
this setup is in place in other sections of the documentation.

```js
import { HMSReactiveStore } from '@100mslive/hms-video-store';

const hms = new HMSReactiveStore();

// by default subscriber is notified about store changes post subscription only, this can be
// changed to call it right after subscribing too using this function.
hms.triggerOnSubscribe(); // optional, recommended

const hmsActions = hms.getHMSActions();
const hmsStore = hms.getStore();
const hmsNotifications = hms.getNotifications();

export { hmsActions, hmsStore, hmsNotifications };
```

```js:some_other_file.js
import { hmsActions, hmsStore, hmsNotifications } from './hms';
```

### React Hooks

If you're planning to use our SDK with React, we provide three friendly hooks as a wrapper over our plain JavaScript interface.
You can wrap your UI in `HMSRoomProvider` and these hooks will become available to all the UI components. We'll learn more about these hooks,
and their use as we navigate through further sections.

```jsx
// app.jsx
import { HMSRoomProvider } from '@100mslive/react-sdk';

export function App() {
  return (
    <HMSRoomProvider>
      <MyApp />
    </HMSRoomProvider>
  );
}
```

```jsx
// component.jsx
import {
  useHMSStore,
  useHMSActions,
  useHMSNotifications
} from '@100mslive/react-sdk';

export function MyComponent() {
  const hmsStore = useHMSStore();
  const hmsActions = useHMSActions();
  const hmsNotifications = useHMSNotifications();

  return </>;
}
```