stiloso
Simplify creation of modules that wraps CSS frameworks with react components.
preact modules that wraps CSS frameworks often are just a collection of simple html elements components with a set of classes from the CSS framework applied.
This module simplify the creation of such react components. It export a function that return a preact component that render to an html5 tag with specified classes and styles applied.
Usage
This example create some components that wraps photonkit widgets.
It uses the html5 helpers function exported in html
.
const {html, propsToClasses} = require('stiloso');
const {h} = require('preact');
const {render} = require('preact-render-to-string');
const ToolbarHeader = html.header('toolbar', 'toolbar-header');
const Window = html.main('window');
const Warning = html.span({color: 'red'});
const Title = html.h1('title', {fontSize: 40});
const Pane = html.section('pane', propsToClasses({small: 'pane-sm'}));
console.log(render(h(Window, {}, [
h(ToolbarHeader, {}, [h(Title, {}, ['Example Window'])]),
h(Pane, {active: true}, [h(Warning, {}, ['this is an example'])])
])));
This will output
<main class="window">
<header class="toolbar toolbar-header">
<h1 class="title" style="font-size: 40px;">
Example Window
</h1>
</header>
<section active class="pane">
<span style="color: red;">
this is an example
</span>
</section>
</main>
API
stiloso
Create a preact component that render to the specified HTML element, applying specified classes and styles. Component children will become children of the HTML element, and props will be forwarded to it as well. Class names and inline CSS styles will be coinstructed as specified below.
Parameters
-
tagName
String Tagname of the html element to use for the component -
definers
(Object | Function | String) Arguments that defines classes and styles to apply to the html element. When elements are of String type, the value will be used as a class of the HTML element; When elements are simple object, they will be used as style property of the element, using normal react syntax for styles; When they are Functions, they will be called with component props as argument. The function should return a string or an array of string that will be used as classes of the HTML element.
Returns Component A stateless preact component.
partial
Partially apply a tagName and a set of definer arguments to stiloso function. Return a function that accept other definers, concatenate them to these and pass all them to stiloso function.
Parameters
-
tagName
String Tagname of the html element to use for the component, required. -
definers
...[type] Set of definers to partially apply tostiloso
function.
Returns Function a stiloso function that will use given tagName and a concatenation of actual and future definers.
html
An object with methods to simplify creation of HTML5 stiloso Component. The object contain a method for each HTML5 element type.
propsToClasses
Given an object with prop names as keys and corresponding class names as values, return a definer that apply classes to the HTML element only when boolean props are present in the component.
Parameters
opts
-
options
Object An object with prop names as keys and corresponding class names as values.
Returns Function a definer to use as stiloso argument.
Install
With npm installed, run
$ npm install stiloso
See Also
noffle/common-readme
-
stiloso-photonkit
- A preact module that wraps photonkit CSS framework, built withstiloso
MIT License
Copyright (c) 2017 Andrea Parodi