react-slate

react-slate copied to clipboard

Write interactive CLI apps with React

Package	Description	Version
@react-slate/core	The core functionality and logic.

Website & documentation

https://zamotany.github.io/react-slate/

Features

• Render React apps to:
  • terminal with render
  • terminal in fullscreen mode with renderFullscreen
  • a string with renderToString
  • a JSON tree renderToJson
• Use for await to continuously render your app using renderToString or renderToJson.
• Render your app to alternative screen buffer and go back to the previous content upon exit with renderFullscreen.
• Log messages to main screen buffer with console when exiting when in fullscreen mode (renderFullscreen).
• Build layouts with FlexBox (https://github.com/vislyhq/stretch).
• Disable colors with NO_COLOR environment variable.
• Use standard ANSI colors, RBG, Hex and CSS keywords to style your app.
• Use built-in <Progress /> and <Spinner /> components.
• Get layout information using onLayout prop.
• Handle clicks using onClick prop.
• Detect mouse wheel events using onWheel prop.
• Support for absolute positioning and depth (zIndex).
• Built with TypeScript.

Please check out Roadmap for in-progress and planned features.

Limitations

• Web components are not compatible.
• Strings must be wrapped in a <Text> component.

Installation

yarn add react @react-slate/core

Usage

import React from 'react';
import { render, View, Text } from '@react-slate/core';

function App() {
  return (
    <View width="100%" flexDirection="row" justifyContent="center">
      <Text color="green" bold>Hello world!</Text>
    </View>
  );
}

render(<App />);