Proposal: <screen /> root component

This is just a quick proposal to change the current render/mount syntax.

The motivation is to remove the need to require both react-blessed and blessed and let react-blessed manage both.

import {Screen, render} from 'react-blessed';

const App = () => (
  <Screen
    autoPadding={true}
    smartCSR={true}
    title="react-blessed hello world"
  >
    <box top="center"
         left="center"
         width="50%"
         height="50%"
         border={{type: 'line'}}
         style={{border: {fg: 'blue'}}}>
      Hello World!
    </box>
  </Screen>
);

render(<App />);

[Yomguithereal]

The initial point was not to bind react-blessed to a specific version of blessed so I don’t have to upgrade the dependencies along with blessed each time a minor/patch is released. Plus the idea was to let people mount an app on an already existing blessed app the same way you would with react-dom. I don’t particularly see what we win by creating a screen component in react-blessed.

[davidmarkclements]

alternatively return both screen and component?

import {Screen, render} from 'react-blessed';

const App = () => (
  <Screen
    autoPadding={true}
    smartCSR={true}
    title="react-blessed hello world"
  >
    <box top="center"
         left="center"
         width="50%"
         height="50%"
         border={{type: 'line'}}
         style={{border: {fg: 'blue'}}}>
      Hello World!
    </box>
  </Screen>
);

const {screen, component} = render(<App />);

could attach screen and component to component e.g.

//..snip..
component.component = component
component.screen = screen
return component
//..snip..

then we support both:

const component = render(<App/>)

and

const {component, screen} = render(<App/>)

or maybe better to do it vv.

//..snip..
screen.component = component
screen.screen = screen
return screen
//..snip..

const screen = render(<App/>)

and

const {component, screen} = render(<App/>)

doesn’t mean you can’t support mount points as well