dxs

Component renderer for Lab

npm i dxs

// config.js
module.exports = [
  {
    name: 'Heading',
    type: 'h2',
    props: {
      m: 0,
      f: 5
    },
    style: {
      lineHeight: 1.25
    }
  },
  {
    name: 'Button',
    type: 'button',
    props: {
      f: 1,
      m: 0
    },
    style: props => ({
      fontFamily: 'inherit',
      display: 'inline-block',
      padding: '12px',
      border: 0,
      borderRadius: '3px',
      color: 'white',
      backgroundColor: props.theme.colors.blue,
      appearance: 'none',
      ':hover': {
        boxShadow: 'inset 0 0 0 999px rgba(0, 0, 0, .125)'
      }
    })
  },
  {
    // Button extension
    name: 'PillButton',
    type: 'Button',
    props: {},
    style: {
      borderRadius: '99999px'
    }
  }
]

const dxs = require('dxs')
const config = require('./config')
 
const library = dxs(config)
// -> object of React UI components

Exporting static modules

See @compositor/lab

Made by Compositor