Nondeterministic Programming Methodology

    ink-broadcast

    0.3.0 • Public • Published

    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
    import makeBroadcastContext from 'ink-broadcast'
     
    // using CommonJS modules
    var makeBroadcastContext = require('ink-broadcast').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 } = makeBroadcastContext('someNewContextChannel')

    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.

    import { h, Component, Text } from 'ink'
    import makeBroadcastContext from 'ink-broadcast'
     
    const { Broadcast, Subscriber } = makeBroadcastContext('theme')
     
    /**
     * This component will wrap our application, allowing any subscribers
     * in the child component tree to subscribe to any changes to the theme.
     **/
    export class ThemeProvider extends Component {
      state = { colour: 'white' }
     
      render() {
        // This is the value we'll be broadcasting to any subscribers
        const value = {
          colour: this.state.colour,
          setTheme: colour => this.setState({ colour })
        }
     
        return <Broadcast value={value}>{this.props.children}</Broadcast>
      }
    }
     
    /**
     * This higher-order component will wrap any components that wish to subscribe
     * to the currently selected theme.
     **/
    export const withTheme = WrappedComponent => props => (
      <Subscriber>
        {theme => <WrappedComponent {...props} theme={theme} />}
      </Subscriber>
    )

    Next, we wrap the top level of our application with our newly-created broadcaster:

    import { h, render } from 'ink'
    import { ThemeProvider } from './theme'
    import App from './App'
     
    render(
      <ThemeProvider>
        <App />
      </ThemeProvider>
    )

    Finally, let's make a theme-aware component:

    import { h, Text } from 'ink'
    import { withTheme } from './theme'
     
    const SelectedThemeDetails = ({ theme }) => (
      <div>
        <Text white>
          The currently selected theme is:
        </Text>
        {' '}
        <Text bold keyword={theme.colour}>{theme.colour}</Text>
      </div>
    )
     
    export default withTheme(SelectedThemeDetails)

    Assuming our <App /> contains our new SelectedThemeDetails component, it will render the currently selected theme.

    Keywords

    none

    Install

    npm i ink-broadcast

    DownloadsWeekly Downloads

    2

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • jimmed