phy-emotion

phy-emotion

All-in-JS template engine for you to write everything in JavaScript. No more HTML. No more CSS. Only JavaScript!

phy-emotion depends on Emotion CSS-in-JS styling engine.

This project is a fork of phy minimal hyperscript helpers. It allows you to use minimalist h helper function to create React/Preact elements. With phy-emotion, the css prop gets parsed by Emotion, so you can write everything in JS!

Starters

To quickly get started with phy-emotion, feel free to clone the starters:

• phy-emotion-next-starter: Starter for Next.js
• phy-emotion-gatsby-starter: Starter for Gatsby

Examples

To style an element, simply pass css prop:

const h = require('phy-emotion');

module.exports = function SomeComponent() {
  return h('#foo', h('span.bar', { css: { color: 'red' } }, 'whee!'));
};

You can create elements without any props, same as phy.

const h = require('phy-emotion');

module.exports = function SomeComponent() {
  return h('#foo', h('span.bar', 'whee!'));
};

License

phy-emotion is a fork of phy which is under BSD-3-Clause license.