Blessed-React

A reblessed wrapper providing a TSX way of defining the nodes.

The package supports only function components, as they are recommended by the React team.

Feature List:

Legend:
✔️ - Done
🔨 - In Progress
❌ - Not Done Yet

• ✔️ No dependency on actual React

• ❌ Support of other forks of blessed

• ✔️ Defining nodes using JSX:

  • ✔️ Support for all blessed nodes
  • ❌ Support for all blessed-contrib nodes
  • ❌ Diffing the state to replace only changed nodes

• ✔️ Loading CSS files:

  • ✔️ Applying CSS classes to elements
  • ❌ Other selectors support (*, >, ~, etc.)
  • ❌ CSS scoping
  • 🔨 Styling:
    • ✔️ border, border-width, border-color, border-style (top|right|bottom|left)
    • ✔️ padding (top|right|bottom|left)
    • ❌ margin (top|right|bottom|left)
    • ✔️ visibility
    • ✔️ color, background-color
    • ✔️ text-align, vertical-align
    • ✔️ width, height
    • ✔️ top, right, bottom, left
    • ❌ Others

• ✔️ Hooks:

  • ✔️ useState
  • ✔️ useEffect
  • 🔨 useRef
  • ✔️ useMemo
  • ❌ useCallback
  • ✔️ useOnKey
  • ✔️ useOnResize

• ✔️ Development Mode

  • ✔️ CSS watch and refresh-on-change
  • ❌ Diagnostics
  • ❌ Helpful Stacktrace
  • ❌ Strict Mode

Example usage:

import BlessedReact, { useOnResize, loadStylesheet, useState } from 'blessed-react';

// Enable dev mode to auto-update CSS on any changes
BlessedReact.EnableDevelopmentMode();

const styles = loadStylesheet('./src/styles.css');

const App = () => {
  useOnResize(BlessedReact.forceRerender);

  const [value, setValue] = useState(0);
  const onRender = () => setTimeout(() => setValue(i => i + 1), 500);

  return (<box // Use the names from blessed
          className={styles.myClass}
          onRender={onRender}>
    The value is: {value}
  </box>);
}

BlessedReact.Bootstrap(App);