This library transpiles YAML to React JSX. It can compile a single file with
yamlayout compile file.yaml
, or recursively build a directory with yamlayout build
.
The compile
and build
functions are exposed to Node as well, simply import
them:
import yamlayout from 'yamlayout';
- or -
const { require, build } = require('yamlayout');
For instance, example/src/pages/home.yaml
looks like:
# import Div100vh from 'react-div-100vh'
# include hero
- hero: Test
- Div100vh.testClass:
- div.testClass:
- h1: inside an h1
- This is just a text node
- h1:
- a:
children: A link
href: https://google.com
- br: # with no properties, use a : to establish an object
- A text node
- span: A span element
- h2: This is a header
- h1.test1.test2#test: inside h1.test1.test2
- h1.test: Inside h1.test
- home:
className: manualClass1 manualClass2
onClick:
# FUNCTIONS WORK TOO :-)
function: () => alert('test')
children:
- p: Manual child
- p: Manual child 2
- p: "Quoted strings work too"
The # include hero
(no from
statement) transpiles to import hero from '../components/hero.js'
, and it's okay that the component is defined as
hero.yaml
, because it will be transpiled to hero.js
when built. This example
shows many of the basic features, like CSS definitions for className
and id
,
include
statements, and providing functions for JSX properties via function
object.
yamlayout compile example/dev/pages/home.yaml
produces the following output:
import React from 'react'
import Div100vh from 'react-div-100vh'
import hero from '../components/hero'
const home = (props) => (<><hero>{`Test`}</hero><Div100vh className={`testClass`}><div className={`testClass`}><h1>{`inside an h1`}</h1>{`This is just a text node`}<h1><a href={`https://google.com`}>{`A link`}</a><br />{`A text node`}<span>{`A span element`}</span></h1><h2>{`This is a header`}</h2></div></Div100vh><h1 id={`test`} className={`test1 test2`}>{`inside h1.test1.test2`}</h1><h1 className={`test`}>{`Inside h1.test`}</h1><home className={`manualClass1 manualClass2`} onClick={() => alert('test')}><p>{`Manual child`}</p><p>{`Manual child 2`}</p><p>{`Quoted strings work too`}</p></home></>);
export default home
Example
Clone yamlayout
:
git clone https://github.com/TeleworkInc/yamlayout
Enter the directory, link the yamlayout
CLI, and then enter the example/
dir:
cd yamlayout && npm link -f --no-save && cd example
Run yamlayout build
and build a compiled version of the dev/
directory
at build/
:
yamlayout build
Use yamlayout --help
for more information.