vla v1.1.1

vla

vla is a React DOM wrapper with gumdrops. It allows you to create React virtual DOM elements without JSX.

Usage

import React from 'react'
import v from 'vla'
import ExtendedUniverse from './extended-universe'

export default props => {

  const inEmpireMovie = ['hoth', 'bespin', 'blue']
  
  return v('.galaxy', [
  
    v('h1.title', 'Star Wars'),
    
    v('p.content', {
      css: {
        'hoth': inEmpireMovie.includes('hoth')
        'death-star': inEmpireMovie.includes('death-star'),
        'jabbas-palace': false
      }
    }, 'Empire Strike Back'),
    
    v('span#jedi.lightsabers', {
      css: 'original-trilogy',
      render: inEmpireMovie.includes('blue')
    }, 'Jedi lightsabers are usually green or blue'),
    
    v(ExtendedUniverse, {
      validAfterDisney: false
    }
    
  ])
  
}

Installing

npm i vla

Documentation

v(selector, content)

Returns a React element

• selector String - A selector string that accepts ids and/or classes
• content Array|String - An array of v children or a string. This will create child elements or a text node, respectively

v(selector, props, content)

Returns a React element

• selector String - A selector string that accepts ids and/or classes
• props Object - An object containing the properties to set on the element
• content Array|String - An array of v children or a string. This will create child elements or a text node, respectively

v(component)

Returns a React element

• component Function - A React.js Component class

v(component, props)

Returns a React element

• component Function - A React.js Component class
• props Object - An object containing the properties to set on the element

Gumdrop Properties

• css Object|Array|String - Define css classes as a string, list, or object (object works like the popular classnames package)
• render Boolean - If falsy, React will skip rendering the target element

Development

Install necessary dependencies

npm install

Run the tests

npm test