ink-broadcast
An implementation of react-broadcast for ink.
Installation
Using yarn:
$ yarn add ink-broadcast
Then, import using your preferred syntax:
// using ES6 modules // using CommonJS modulesvar makeBroadcastContext = default
Usage
The default exported method will return you a pair of components: a Broadcast
and a Subscriber
. The two of these can be used together to pass data between components via
context, while neatly sidestepping the issue of any other components blocking updates
further down the tree, much like react-broadcast does for React.
const Broadcast Subscriber =
Example
In this example, we're going to build a context-powered theming engine for a fictional ink application. The use-case here is being able to write components that are theme-aware, while allowing control of the overall application theme from the top level.
Below, we create a top-level broadcaster, and reusable subscriber higher-order component, and export them to use elsewhere in our application.
const Broadcast Subscriber = /** * This component will wrap our application, allowing any subscribers * in the child component tree to subscribe to any changes to the theme. **/ state = colour: 'white' { // This is the value we'll be broadcasting to any subscribers const value = colour: thisstatecolour this return <Broadcast value=value>thispropschildren</Broadcast> } /** * This higher-order component will wrap any components that wish to subscribe * to the currently selected theme. **/const withTheme = <Subscriber> <WrappedComponent ...props theme=theme /> </Subscriber>
Next, we wrap the top level of our application with our newly-created broadcaster:
Finally, let's make a theme-aware component:
const SelectedThemeDetails = <div> <Text white> The currently selected theme is: </Text> ' ' <Text bold keyword=themecolour>themecolour</Text> </div> SelectedThemeDetails
Assuming our <App />
contains our new SelectedThemeDetails
component, it
will render the currently selected theme.