README.md

React Twitch Provider

React package that provides a hooks set to retrieve Twitch account and global data

Installation

Register the application

Follow the Twitch documentation to register an application.

The goal is to obtain your client ID, which we’ll use to get your OAuth access token and to set the Client-Id header in all requests to the Twitch API.

Environment file

Note that client IDs are considered public and can be embedded in a web page’s source. Although, it can be a good practice to store it in a environment file to not spread it.

In your application, create a .env file with

touch .env

Do not forget to add this file to your .gitignore file

In this file, create a key that will hold your client ID. For example:

REACT_APP_TWITCH_CLIENT_ID=YOUR-CLIENT-ID

Add the package

Install the package with the package manager of your choice. With yarn you can do

yarn add react-twitch-provider

Documentation

API Reference

Documentation for each available hook can be found in the /docs folder of the repository.

• useTwitchChannelsInfo
• useTwitchCheermotes
• useTwitchCurrentUser
• useTwitchTopGames

Examples

We have several examples in the /examples folder of the repository. Here is a first basic one to get you started:

import TwitchProvider, { useTwitchCurrentUser } from 'react-twitch-provider'

function Greeting() {
  const { data } = useTwitchCurrentUser()
  return <div>{data && <>Welcome {data.display_name}</>}</div>
}

export function App() {
  return (
    <TwitchProvider clientId={yourClientId} redirectUri={yourRedirectUri}>
      <Greeting />
    </TwitchProvider>
  )
}

This example will render your Twitch username into a container on the page.

Make sure to follow the installation section to handle the client ID and OAuth redirect URI from Twitch.

Development

Setup

After cloning the repository, first use

yarn install

It will install all the necessary dependencies, like SWR or Zod, two libraries that the package strongly relies on.

Build

Build the package with

yarn build

It will build the package source twice, once for ESM and once for CommonJS.

Release

We use GitHub Actions to automate the release workflow of the package. See the release file of the repository to have more details about the release strategy and the process requirements.

Tests

We use Jest, React Testing Library and Mock Service Worker to test the package.

Automated tests

Run the tests in watch mode with

yarn test:watch

Run a tests coverage report with

yarn test:coverage

Manual testing

When developing and working on the package, you may want to test your changes in live. In this case, Yalc is a good solution, that offers a better workflow than npm | yarn link.

Install Yalc

yarn global add yalc

Publish

Before publishing, make sure to build the package with yarn build

In your react-twitch-provider package folder, run

yalc publish

It will copy all the files that should be published in remote NPM registry.

In a external React application that you've created, run

yalc add react-twitch-provider

It will copy the current version from the store to your dependent project's .yalc folder and inject a file:.yalc/my-package dependency into the package.json.

You can alternatively use one of the projects of the /examples folder of the repository to use it as a template.

Update

Later, you can run

yalc update my-package

It will update the latest version from store.