Blessed-react NPM

Blessed-React

NPM GitHub Workflow Status (master)

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:
:heavy_check_mark: - Done
:hammer: - In Progress
:o: - Not Done Yet
:x: - Probably won't be supported

:heavy_check_mark: No dependency on actual React
:o: Support of other forks of blessed
:heavy_check_mark: Defining nodes using JSX:
- :heavy_check_mark: Support for all blessed nodes
- :o: Support for all blessed-contrib nodes
- :o: Diffing the state to replace only changed nodes
:heavy_check_mark: Loading CSS files:
- :heavy_check_mark: Applying CSS classes to elements
- :o: Other selectors support (*, >, ~, etc.)
- :o: CSS scoping
- :hammer: Styling:
  - :heavy_check_mark: border, border-width, border-color, border-style (top|right|bottom|left)
  - :heavy_check_mark: padding (top|right|bottom|left)
  - :x: margin - not supported by blessed
  - :heavy_check_mark: visibility
  - :heavy_check_mark: color, background-color
  - :heavy_check_mark: text-align, vertical-align
  - :heavy_check_mark: width, height
  - :heavy_check_mark: top, right, bottom, left
  - :o: Others
:heavy_check_mark: Hooks:
- :heavy_check_mark: useState
- :heavy_check_mark: useEffect
- :hammer: useRef
- :heavy_check_mark: useMemo
- :heavy_check_mark: useCallback
- :heavy_check_mark: useOnKey
- :heavy_check_mark: useOnResize
- :o: useTransition
- :o: useDeferredValue
- :heavy_check_mark: useContext
- :o: useReducer
- :o: useId
:heavy_check_mark: Development Mode
- :heavy_check_mark: CSS watch and refresh-on-change
- :hammer: Diagnostics
- :heavy_check_mark: Component Stacktrace
- :o: Strict Mode
:o: Additional features
- :heavy_check_mark: \<Suspense> component
- :hammer: ErrorBoundary component
- :o: Portals
- :heavy_check_mark: 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);