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
❌ - Probably won't be supported

• ✔️ 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 - not supported by blessed
    • ✔️ visibility
    • ✔️ color, background-color
    • ✔️ text-align, vertical-align
    • ✔️ width, height
    • ✔️ top, right, bottom, left
    • ⭕ Others

• ✔️ Hooks:

  • ✔️ useState
  • ✔️ useEffect
  • 🔨 useRef
  • ✔️ useMemo
  • ✔️ useCallback
  • ✔️ useOnKey
  • ✔️ useOnResize
  • ⭕ useTransition
  • ⭕ useDeferredValue
  • ✔️ useContext
  • ⭕ useReducer
  • ⭕ useId

• ✔️ Development Mode

  • ✔️ CSS watch and refresh-on-change
  • 🔨 Diagnostics
  • ✔️ Component Stacktrace
  • ⭕ Strict Mode

• ⭕ Additional features

  • ✔️ <Suspense> component
  • 🔨 ErrorBoundary component
  • ⭕ Portals
  • ✔️ Contexts

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);

License & Contributing

The project is licensed under the MIT License.

By contributing to the project you agree to release the code added under the same license (MIT).