inferno-mark

Create mark(up/down) components similar to styled-components.

npm install --save inferno-mark

Usage

Basic

This creates two inferno components, <Title> and <Menu>:

import Inferno from 'inferno';
import mark from 'inferno-mark';

const Title = mark.down`
  # Hello World, this is my first markup component!
`;

const Menu = mark.up`
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="https://github.com/dfrankland">Github</a></li>
  </ul>
`;

You render them like so:

// Add style to the wrapping element
<Title style={{ color: red }} />

// Add a class `link` to all `<a></a>` tags.`
<Menu
  infernoMarkOptions={{
    components: {
      a: ({ children, ...props}) => <a {...props} className="link">{children}</a>,
    }
  }}
/>