Wondering what’s next for npm?Check out our public roadmap! »

    react-blessed-contrib

    0.2.1 • Public • Published

    react-blessed-contrib

    A wrapper for blessed-contrib widgets to be rendered with react-blessed.

    Installation

    You can install react-blessed-contrib through npm:

    npm install react blessed react-blessed
    npm install react-blessed-contrib

    Demo

    For a quick demo you can clone this repository and check some of the examples:

    git clone https://github.com/dundalek/react-blessed-contrib
    cd react-blessed-contrib
    npm install
     
    # Some examples (code is in `examples/`) 
    npm run dashboard
    npm run charts
    npm run basic
     
    # Run any example with babel-node 
    ./node_modules/.bin/babel-node examples/charts.js

    Usage

    Using components

    Import components and render with React. You can mix them with native react-blessed components. Most components can be used directly as shown in the example. Refer to following sections to see how to use layout components like Grid and Carousel.

    import React, { Component } from 'react';
    import blessed from 'blessed';
    import { render } from 'react-blessed';
    import { Bar } from 'react-blessed-contrib';
     
    // Rendering a simple centered box with a bar chart
    class App extends Component {
      render() {
        return (
          <box top="center"
               left="center"
               width="80%"
               height="80%"
               border={{type: 'line'}}
               style={{border: {fg: 'blue'}}}>
            <Bar
              label="Server Utilization (%)"
              barWidth={4}
              barSpacing={6}
              xOffset={0}
              maxHeight={9}
              data={{
                titles: ['bar1', 'bar2'],
                data: [5, 10]
              }}
            />
          </box>
        );
      }
    }
     
    // Creating our screen
    const screen = blessed.screen();
     
    // Rendering the React app using our screen
    const component = render(<App />, screen);

    Grid

    Pass in children components to use a grid layout:

    import { Grid, Map } from 'react-blessed-contrib';
     
    <Grid rows={12} cols={12}>
      <Map row={0} col={0} rowSpan={4} colSpan={4} label="World Map" />
      <box row={4} col={4} rowSpan={4} colSpan={4}>My Box</box>
    </Grid>

    If you don't specify rowSpan or colSpan then 1 is used as a default:

    import { Grid, Map } from 'react-blessed-contrib';
     
    <Grid rows={1} cols={2}>
      <Map col={0} label="World Map" />
      <box col={1}>My Box</box>
    </Grid>

    In case there would be name conflicts with props (row, col, rowSpan, colSpan), you can use alternative notation:

    import { Grid, GridItem, Map } from 'react-blessed-contrib';
     
    <Grid rows={12} cols={12}>
      <GridItem row={0} col={0} rowSpan={4} colSpan={4} component={Map} options={{label: 'World Map'}} />
      <GridItem row={4} col={4} rowSpan={4} colSpan={4} component={'box'} options={{content: 'My Box'}} />
    </Grid>

    Carousel

    Pass in subcomponents as children. Refer to examples/carousel.js for full example.

    import { Carousel } from 'react-blessed-contrib';
     
    <Carousel interval={3000} controlKeys={true} screen={screen}>
      <Page1 />
      <Page2 />
    </Carousel>

    Wrapping a custom blessed widget

    Say you have a custom blessed widget:

    const widget = myBlessedWidget();
    screen.append(widget);

    You can wrap it in a component and use like:

    import React from 'react';
    import { render } from 'react-blessed';
    import { createBlessedComponent } = 'react-blessed-contrib';
     
    const MyBlessedWidget = createBlessedComponent(myBlessedWidget);
     
    render(<MyBlessedWidget />, screen);

    License

    MIT

    Resources

    Useful resources for learning more about React internals:

    Install

    npm i react-blessed-contrib

    DownloadsWeekly Downloads

    3

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    43.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar