react-twitch-provider v0.1.1-beta.0
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.
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.
1 year ago
1 year ago