inferno-mark

    1.0.2 • Public • Published

    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:

    <Title />
    <Menu />

    Mapped components

    Mark components can substitute components with user-defined ones:

    import Inferno from 'inferno';
    import mark from 'inferno-mark';
     
    // Create links with both internal and external links
    const Menu = mark.up`
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://github.com/dfrankland">Github</a></li>
    </ul>
    `;

    You can pass an object with a key of the tag name and a value of an inferno component that it should be substituted with:

    // Add `target="_blank"` to external links
    <Menu
      infernoMarkOptions={{
        components: {
          a: ({ children, ...props}) => (
            <a
              {...{
                ...props,
                ...(/^https?:\/\//gi.test(props.href) ? { target: '_blank' } : {}),
              }}
            >
              {children}
            </a>
          ),
        }
      }}
    />

    Which will render as such:

    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://github.com/dfrankland" target="_blank">Github</a></li>
    </ul>

    Adapting based on props

    The same powerful way that styled-components can change styles based on props, so can inferno-mark! Say for example you'd like to make a more dynamically created menu:

    import Inferno from 'inferno';
    import mark from 'inferno-mark';
     
    const Menu = mark.down`
    ${props => props.items.map(item => `* [${item}](/${item.toLowerCase()})`).join('\n')}
    `;

    Pass props like so:

    <Menu items={['Blog', 'Contact', 'Demo']} />

    Finally, see it rendered as such:

    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/demo">Demo</a></li>
    </ul>

    Install

    npm i inferno-mark

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • dfrankland