@a-morphous/frontispiece-ink-hookstate v4.1.0

Ink Hookstate

Generates a Hookstate hook that links up to ink-processor and can be used to manipulate and display an Ink story with Hookstate and React / Preact.

Usage

See the example for a demo.

import { Story } from 'inkjs'
import { createInkHookState } from '../../src'

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

const { InkHookStateController, useInkHookState } = createInkHookState(story)

// InkHookStateController is the global state, and can be manipulated outside of hooks
InkHookStateController.registerCommand('pause', Pause)
InkHookStateController.registerCommand('log', Log)

// useInkHookState is the hook
const InkViewerComponent = () => {
    const inkState = useInkHookState()

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