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 : TwitchExt-Vuex

• Twitch Documentation