@namics/nitro-component-handlebars

A handlebars helper to render a nitro component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Jan 5, 2017Aug 11, 2016Minified + gzip package size for @namics/nitro-component-handlebars in KB

Readme

Nitro Component Handlebars Helper

npm version Build Status Coverage Status Codestyle

This helper allows to render a nitro component using handlebars

Installation

npm i --save-dev @namics/nitro-component-handlebars

Usage

const componentHandlebarsHelper = require('@namics/nitro-component-handlebars');
module.exports = componentHandlebarsHelper({
    rootDirectory: '/path/to/nitro/root'
})

Template usage

Default

The following code will render components/atoms/button/button.hbs:

{{component "components/atoms/button"}}

Child elements

The following code will set the value of {{children}} to 'Click me':

{{#component "components/atoms/button"}}
    Click me
{{/component}}

Attributes

The following code will set the value of {{size}} to 'xl':

{{component "components/atoms/button" size="xl"}}

Array attributes

The following code will set the value of {{sizes}} to ['xl', 'l']:

{{component "components/atoms/button" sizes="['xl', 'l']"}}

Data files

The following code will set the template variables to the content of components/atoms/button/_data/demo.json:

{{component "components/atoms/button" data-file="demo.json"}}

Rendering foreign modules

The following code will render a component from another node_module e.g. node_modules/base-pattern/components/atoms/button/button.json

{{component "~base-pattern/components/atoms/button"}}

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. This project uses the Codestyle.

License

This project is licensed under MIT.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.