React

Widgets written with React use BreezyReact. Its hooks wrap the breezy functions and re-render your component whenever the streamer changes the widget's settings.

WidgetProvider

Wrap your widget in WidgetProvider so the hooks receive updates.

const { WidgetProvider } = BreezyReact

createRoot(document.getElementById('root')).render(
	<WidgetProvider>
		<Alert />
	</WidgetProvider>
)

Hooks

useField<T = any>(name: string): T | null
useFields(names: Array<string>): FieldList
useMedia(id: ID | null | undefined): Media | null
useMedias(ids: Array<ID>): Array<Media> | null
usePalette(image: string | null | undefined): Palette | null
useWidget(id?: ID): WidgetController

Hook	Equivalent
useField	breezy.getField
useFields	breezy.getFields
useMedia	breezy.getMedia, null while loading
useMedias	breezy.getMedias, null while loading
usePalette	breezy.getPalette, null while loading
useWidget	breezy.getWidget

const { useField, useMedia } = BreezyReact

function Alert() {

	let title = useField('title')
	let image = useField('image')
	let media = useMedia(image?.selection)

	return (
		<div className="alert">
			{media && <img src={media.url} />}
			<h1>{title?.text}</h1>
		</div>
	)
}