react-ansi-style

1.0.0 • Public • Published

react-ansi-style

build status dependency status

Convert a styled ansi string to react spans with classes for the styles

Example

var _ = require('lodash');
var jsCss = require('js-managed-css');
var React = require('react');
var ReactDOM = require('react-dom');
var reactAnsiStyle = require('react-ansi-style');
 
//build up a styled string to test with
var chalk = require('chalk');
chalk.enabled = true;
var test_styles = _.without(_.keys(chalk.styles), 'reset', 'grey', 'hidden');
var ansi_string = _.map(test_styles, function(style){
  return chalk[style](style);
}).join(' ');
 
//make this look like a terminal
jsCss({
  'html, body': {
    'color': '#DDD !important',
    'background': '#222 !important',
    'line-height': '1.5em',
    'font-family': 'mono'
  }
});
require('react-ansi-style/inject-css');//default css styles
 
ReactDOM.render(React.createElement('div', null,
 
  //////////////////////////////////
  //Here is where the magic happens
  reactAnsiStyle(React, ansi_string)
 
), document.body);

react-ansi-style demo

API

reactAnsiStyle = require('react-ansi-style')

reactAnsiStyle(React, str, opts)

A function that returns an array of react span elements with css classes to style the string.

  • React - yes, pass in the React object, this avoids many of the React's peer-dependancy quirks.
  • str - the ansi string you want styled.
  • opts.prefix - a string prefix for the css classes, by default it's 'react-ansi-style-'

require('react-ansi-style/inject-css')

This will inject the default CSS styling.

License

MIT

Dependents (1)

Package Sidebar

Install

npm i react-ansi-style

Weekly Downloads

5,489

Version

1.0.0

License

MIT

Last publish

Collaborators

  • farskipper