npm i --save twitchext-react
yarn add twitchext-react
If you are not familiar with React hooks, take a look at the documentation
App.js
import React from 'react'
import {ExtensionProvider} from 'twitchext-react'
import View from "./View";
const Panel = ()=>{
return <ExtensionProvider>
<View/>
</ExtensionProvider>
}
export default Panel
View.js
import React from 'react'
import {useExt} from 'twitchext-react'
const Example = ()=>{
const ext = useExt()
return <div>{ext.viewer.opaqueId}</div>
}
export default Example
The data structure is based on the - Twitch Extension Helper
You can access the data using the same structure
clientId:string extension client id, initialized after the first onAuthorized callback calls
channel.initialized:boolean return if the channel information have been set.
id:string return the channel id of the stream.
configuration.initialized:boolean return if the configuration service has been set.
For the default data structure see the OnContext method.
The same structure is used to store the data under the context field.
context.initialized:boolean return if the context information have been set.
viewer.initialized:boolean return if the viewer information have been set.
features.initialized:boolean return if the viewer information have been set.
You can use my other package for VueJs/Vuex:
- Vue: TwitchExt-Vue
- Vuex: TwitchExt-Vuex