@rocketstation/black-box NPM

Black Box

Black Box is a lightweight & powerful tool based on React & Fela. It combines behavior, presentation, structure in one place

Installation

npm i --save @rocketstation/black-box

Usage

import $ from '@rocketstation/black-box'

const MyComponent = ({ name, ...props }) =>
  $(
    'div',
    {
      onClick: () => { console.log('test') },
      skin: {
        backgroundColor: 'black',
        color: 'white',
      },
      ...props
    },
    'Hello',
    $('span', name),
    '!'
  )

ReactDOM.render(
  $(MyComponent, { name: 'John Doe' }),
  document.getElementById('app')
)

Reserved Props

skin - if it is object or function, it will be removed from props & passed to Fela.combineRules

key - will be passed to the root component

Motivation

BlackBox adds extra configuration to React.createElement

Why not to use JSX

JSX is not JS. It tries to combine HTML & JS syntax inside JS. It limits JS features & adds new language hacks & overheads. Moreover, JSX requires closing tags