# @a-morphous/frontispiece-ink-hookstate

> Ink and Hookstate integration.

Latest version **5.0.0** (published 2025-09-27) · MPL 2.0 license · 0 weekly downloads

## Install

```sh
npm install @a-morphous/frontispiece-ink-hookstate
pnpm add @a-morphous/frontispiece-ink-hookstate
yarn add @a-morphous/frontispiece-ink-hookstate
bun add @a-morphous/frontispiece-ink-hookstate
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2025-09-27 |
| First published | 2022-08-14 |
| Weekly downloads | 0 |
| License | MPL 2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 0 |
| Unpacked size | 37.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Amorphous |
| Maintainers | amorphous |

## Links

- npm: https://www.npmjs.com/package/@a-morphous/frontispiece-ink-hookstate
- npm.io page: https://npm.io/package/@a-morphous/frontispiece-ink-hookstate

## Recent versions

- 5.0.0 (latest) — 2025-09-27
- 4.1.0 — 2023-06-03
- 4.0.0 — 2023-06-03
- 3.0.0 — 2023-04-30
- 2.2.0 — 2023-03-08
- 2.1.0 — 2023-01-28
- 2.0.1 — 2022-11-26
- 2.0.0 — 2022-11-24
- 1.3.0 — 2022-11-23
- 1.2.0 — 2022-08-14

## README

# 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](../../apps/example/) for a demo.

```tsx
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>
}
```

---
_Source: https://npm.io/package/@a-morphous/frontispiece-ink-hookstate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._