Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vscav/react-twitch-provider
React hooks package to retrieve Twitch account and global data.
https://github.com/vscav/react-twitch-provider
hooks package react twitch typescript
Last synced: 5 days ago
JSON representation
React hooks package to retrieve Twitch account and global data.
- Host: GitHub
- URL: https://github.com/vscav/react-twitch-provider
- Owner: vscav
- License: mit
- Created: 2021-03-18T23:43:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T23:56:34.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T18:14:58.488Z (14 days ago)
- Topics: hooks, package, react, twitch, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-twitch-provider
- Size: 573 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://dev.twitch.tv/docs/authentication/register-app).
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`](https://github.com/vscav/react-twitch-provider/tree/main/docs) folder of the repository.
- [`useTwitchChannelsInfo`](https://github.com/vscav/react-twitch-provider/tree/main/docs/use-twitch-channels-info.md)
- [`useTwitchCheermotes`](https://github.com/vscav/react-twitch-provider/tree/main/docs/use-twitch-cheermotes.md)
- [`useTwitchCurrentUser`](https://github.com/vscav/react-twitch-provider/tree/main/docs/use-twitch-current-user.md)
- [`useTwitchTopGames`](https://github.com/vscav/react-twitch-provider/tree/main/docs/use-twitch-top-games.md)
### Examples
We have several examples in the [`/examples`](https://github.com/vscav/react-twitch-provider/tree/main/examples) folder of the repository. Here is a first basic one to get you started:
```jsx
import TwitchProvider, { useTwitchCurrentUser } from 'react-twitch-provider'
function Greeting() {
const { data } = useTwitchCurrentUser()
return
{data && <>Welcome {data.display_name}>}
}
export function App() {
return (
)
}
```
This example will render your Twitch username into a container on the page.
> Make sure to follow the [installation section](#register-the-application) 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](https://github.com/features/actions) to automate the release workflow of the package. See the [release file](https://github.com/vscav/react-twitch-provider/tree/main/RELEASE.md) 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](https://docs.npmjs.com/files/package.json#files).
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`](https://github.com/vscav/react-twitch-provider/tree/main/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.