> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# JS Client SDK

> The Hop JS Client SDK allows you to interact with Hop products from your frontend application.

## Installation

The JS Client SDK is hosted on NPM under `@onehop/client`.

#### npm

```bash theme={null}
npm i @onehop/client
```

#### Yarn

```bash theme={null}
yarn add @onehop/client
```

## Initializing the SDK

Find your project ID on [this page](https://console.hop.io/project/settings).

```jsx JSX theme={null}
import {hop} from '@onehop/client';

// hop.init should be called as early as possible in your application's lifecycle

hop.init({
	projectId: 'project_xxx', // replace with your project ID
});
```

## Subscribing to a unprotected channel

Unprotected channels allow anyone to connect as long as they know the channel id. You can learn more about types of channels on [this page](https://react.dev/learn/manipulating-the-dom-with-refs).

```jsx theme={null}
import {hop} from '@onehop/client';

const instance = hop.init({projectId: ''});

// Subscribe this client to a channel
instance.subscribeToChannel('HopIsReallyCool');

instance.on('STATE_UPDATE', data => {
	console.log(`Look at all those chickens`, data.state);
});
```

## Send a message to a channel

```jsx theme={null}
import {hop} from '@onehop/client';

const instance = hop.init({projectId: '', token: ''});

instance.sendMessage('votes', 'add', 1);
instance.sendMessage('public-chat', 'kashcafe', {
	user: 'Kashall',
	message: 'This is a message!',
});
```