Ink Zustand

Manipulate an ink-processor using zustand as a React data-binding.

import { Story } from 'inkjs'
import { createInkZustandState } from '@a-morphous/frontispiece-ink-zustand'

const story = new Story(/* story JSON */)

// this creates a zustand hook, and can be manipulated both in and out of the React tree.
const useInkState = createInkHookState(story)
const InkHookStateController = useInkState.getState()

InkHookStateController.registerCommand('pause', Pause)
InkHookStateController.registerCommand('log', Log)

const InkViewerComponent = () => {
    const inkState = useInkState()

    return <div>{inkState.getVisibleLines().map((line) => {
        return <p>{line.text}</p>
    })}</div>
}