Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dundalek/react-blessed-contrib
A wrapper for blessed-contrib widgets to be rendered with react-blessed.
https://github.com/dundalek/react-blessed-contrib
Last synced: about 2 months ago
JSON representation
A wrapper for blessed-contrib widgets to be rendered with react-blessed.
- Host: GitHub
- URL: https://github.com/dundalek/react-blessed-contrib
- Owner: dundalek
- License: mit
- Created: 2016-12-19T15:56:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-02T20:02:34.000Z (almost 6 years ago)
- Last Synced: 2024-04-14T00:49:56.142Z (5 months ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 60
- Watchers: 6
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-blessed - react-blessed-contrib - contrib widgets to be rendered with react-blessed. (Libraries)
README
# react-blessed-contrib
A wrapper for [blessed-contrib](https://github.com/yaronn/blessed-contrib) widgets to be rendered with [react-blessed](https://github.com/Yomguithereal/react-blessed).
## Installation
You can install `react-blessed-contrib` through npm:
```bash
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:
```bash
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.
**Note:** When using refs, the actual blessed widget instance (which you use to call methods like `scrollTo`) is located on the `widget` property of the component ref that's passed to your ref callback. See the ref on the `Bar` component below for a usage example.
```js
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 (
this.barRef = r ? r.widget : null}
label="Server Utilization (%)"
barWidth={4}
barSpacing={6}
xOffset={0}
maxHeight={9}
data={{
titles: ['bar1', 'bar2'],
data: [5, 10]
}}
/>
);
}
}
// Creating our screen
const screen = blessed.screen();
// Rendering the React app using our screen
const component = render(, screen);
```
### Grid
Pass in children components to use a grid layout:
```js
import { Grid, Map } from 'react-blessed-contrib';
My Box
```
If you don't specify `rowSpan` or `colSpan` then `1` is used as a default:
```js
import { Grid, Map } from 'react-blessed-contrib';
My Box
```
In case there would be name conflicts with props (`row`, `col`, `rowSpan`, `colSpan`), you can use alternative notation:
```js
import { Grid, GridItem, Map } from 'react-blessed-contrib';
```
### Carousel
Pass in subcomponents as children. Refer to `examples/carousel.js` for full example.
```js
import { Carousel } from 'react-blessed-contrib';
```
### Wrapping a custom blessed widget
Say you have a custom blessed widget:
```js
const widget = myBlessedWidget();
screen.append(widget);
```
You can wrap it in a component and use like:
```js
import React from 'react';
import { render } from 'react-blessed';
import { createBlessedComponent } = 'react-blessed-contrib';
const MyBlessedWidget = createBlessedComponent(myBlessedWidget);
render(, screen);
```
## License
MIT
## Resources
Useful resources for learning more about React internals:
- https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html
- http://goshakkk.name/react-custom-renderers/