Experimental hack that allows using Ink components with ReactCLI and React.
See also: Ink is moving to React with their next version.
vadimdemedes/ink#90
mgrip/react-cli#10
mgrip/react-cli#8
The goal is to use things like MobX with pre-existing Ink components. MobX works with React, and thus with ReactCLI, but not with Ink, which is not built on top of React. However, ReactCLI does not have the rich selection of Components that have been built for Ink.
If we can trick third-party Ink components into running against React instead of Ink, then we can use them in our ReactCLI apps.
We inject ourselves into node's require cache, replacing Ink's custom
implementations of h
(createElement
) and Component
. Third-party
Ink components, and Ink's built-in Components, will run against these
injections instead of Ink. With any luck, they'll behave like normal
React components.
Run the example via:
npm run example
- Install React and Ink as peer dependencies.
- Run the bootstrapper before Ink is require()d.
- Wrap all the Ink components you want to use.
- Run the UI via
ReactCLI()
from "react-cli-renderer."
import {bootstrap, wrapInkComponent} from 'ink-on-reactcli';
import ReactCLI from 'react-cli-renderer';
import _InkSpinner from 'ink-spinner';
const InkSpinner = wrapInkComponent(_InkSpinner);
class MyAppUI extends React.Component {
render() {
return <Section><InkSpinner /></Section>;
}
}
ReactCLI(<MyAppUI />);