Skip to content

🕴 Magically transform HTML to React components without danger

License

Notifications You must be signed in to change notification settings

adambrgmn/rehtml

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rehtml

🕴 Magically transform HTML to React components without danger

Build Status npm version Dependency Status

Have you found yourself using Reacts dangerouslySetInnerHTML and feeling a bit ashamed? Despair not – Rehtml can convert your HTML string into React components.

Installation

$ yarn add rehtml
# or npm install rehtml --save

or via a script tag:

<script src="https://unpkg.com/rehtml"></script>
<!-- This file exposes the variable Rehtml (note that it also requires React) -->

Usage

Basic

import Rehtml from 'rehtml';

export default function Article({ html }) {
  return <Rehtml html={html} />;
}

That's basically all you have to do make it work. It will parse your HTML string and create corresponding React components.

Custom Wrapper

By default Rehtml will wrap all your HTML inside a div without any styles at all. But you can easily customize the wrapping object using prop Wrapper. The most important thing to remember is to make the component render children:

import Rehtml from 'rehtml';

function Wrapper({ children }) {
  return (
    <article className="post">
      {children}
    </article>
  );
}

export default function Article({ html }) {
  return <Rehtml html={html} Wrapper={Wrapper} />;
}

Custom Elements

By default Rehtml will transform your HTML into corresponing React elements. That means that <p class="foo">Bar</p> will be a React element like <p className="foo">Bar</p>. But you can choose to map the HTML elements to any React component you wish:

import Rehtml from 'rehtml';

function P({ children }) {
  return (
    <p style={{ color: 'red' }}>
      {children}
    </p>
  );
}

export default function Article({ html }) {
  const mappings = {
    p: Paragraph, // the key must correspond to a HTML element, e.g. a, p, em, strong, div etc.
  };

  return <Rehtml html={html} mappings={mappings} />;
}

Just like the Wrapper it's important to note that your custom elements must render the children prop.

This type of mapping works very will with "css-in-js"-modules like styled-components:

import Rehtml from 'rehtml';
import styled from 'styled-components';

const A = styled.a`
  text-decoration: none;
  color: #bada55;
`;

export default function Article({ html }) {
  const mappings = {
    a: A,
  };

  return <Rehtml html={html} mappings={mappings} />;
}

Props

Prop Required Default Examples
html true (Not applicable) <p>Foo <em>bar</em></p>
Wrapper false <div>{children}</div> <article>{children}</article>
mappings false {} { a: Link, em: Italic, strong: Bold }

License

Licensed under the MIT License, Copyright © 2016 Adam Bergman

See LICENSE for more information.

About

🕴 Magically transform HTML to React components without danger

Resources

License

Stars

Watchers

Forks

Packages

No packages published