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:
-
✔️ No dependency on actual React -
⭕ Support of other forks ofblessed
-
✔️ Defining nodes using JSX:✔️ Support for allblessed
nodes⭕ Support for allblessed-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).