react-x11
React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply your React or React Native like experience to build small GUI programs to run in X Window environment (usually linux desktop, but I personally more often code under osx + XQuattz)
This library is mostly written in javascript all way down, no special bridging code in different language required. For communication with X server node-x11 library is used, which is pure JS implementation of X11 protocol (think of it as xlib rewritten in javascript/node.js)
Currently only window component is available, in the future we'll add windowless controls support, simple controls library and yoga-layout powered layout management
Trying it out
Clone this repo and from its folder run
npm installAfter install is complete you can run examples by running one of those commands:
npm run examples:simple
npm run examples:simple-nojsx
npm run examples:xeyesExample
const React = require('react');
const ReactX11 = require('react-x11')
class App extends React.Component {
handleRef (win) {
// win is https://github.com/sidorares/ntk/blob/master/lib/window.js instance
win.on('expose', ev => {
ctx.fillStyle = 'black';
ctx.fillText('Hello', ev.x, ev.y);
})
}
render() {
const paintRadialGradient = e => {
const ctx = e.window.getContext('2d');
const gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(1, "rgb(255, 255, 255)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.width, ctx.height);
}
return (
<window ref={this.handleRef} onMouseDown={ev => console.log('hello')}>
<window onMouseMove={paintRadialGradient} />
</window>
)
}
}
ReactX11.render(React.createElement(App));