Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

chx

0.1.0 • Public • Published

chx

A wrapper on top of JSX to make outputting text on a terminal with chalk a HTML-like experience.

How to use

/** @jsx chx */
import chx from 'chx';
 
console.log(<p>
  Welcome to the <b>future</b>.<br />
  What's your <cyan>name</cyan>?<br />
  Hope you enjoy your <bg color="yellow">time here</bg>.
  More at <u>https://github.com/zeit/chx</u>.<br />
  <red>H</red><yellow>a</yellow><blue>v</blue><green>e</green>{' '}
  <cyan>f</cyan><white>u</white><magenta>n</magenta><bgRed>!</bgRed>
</p>);

and make sure the babel transform react-jsx is in place.

Built ins

  • All the colors, modifiers and bgColors from chalk are available as tags. For example: <bgRed>, <blue> and <italic>
  • The HTML shorthands are exposed when available:
    • <b> (bold)
    • <i> (italic)
    • <u> (underline)
    • <strike> (strikethrough)
  • A special <bg color> element is available as a shorthand.
  • To wrap, we expose a few noop elements. Use whichever you like most:
    • <p>
    • <chx>
    • <span>

For more advanced terminal UI needs, check out react-blessed.

Keywords

none

Install

npm i chx

DownloadsWeekly Downloads

1

Version

0.1.0

License

none

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar