React package that provides a hooks set to retrieve Twitch account and global data
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.
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
.gitignorefile
In this file, create a key that will hold your client ID. For example:
REACT_APP_TWITCH_CLIENT_ID=YOUR-CLIENT-ID
Install the package with the package manager of your choice. With yarn you can do
yarn add react-twitch-provider
Documentation for each available hook can be found in the /docs folder of the repository.
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.
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 the package with
yarn build
It will build the package source twice, once for ESM and once for CommonJS.
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.
We use Jest, React Testing Library and Mock Service Worker to test the package.
Run the tests in watch mode with
yarn test:watch
Run a tests coverage report with
yarn test:coverage
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.
yarn global add yalc
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
/examplesfolder of the repository to use it as a template.
Later, you can run
yalc update my-package
It will update the latest version from store.