react-marmalade

``` import Marmalade, { Body, Section, Column } from 'react-marmalade' ```

Usage no npm install needed!

<script type="module">
  import reactMarmalade from 'https://cdn.skypack.dev/react-marmalade';
</script>

README

Marmalade API

import Marmalade, { Body, Section, Column } from 'react-marmalade'

Body

Use once as the container, accepts pixels or percentages for maxWidth.

<Body maxWidth="600px">

</Body>

Section

Use for full width horizontal elements. Setting a width will center the section.

<Body maxWidth="600px">
  <Section width="400px">

  </Section>
</Body>

Column

Add columns to divide up the section and render your elements.

<Body maxWidth="600px">
  <Section width="400px">
    <Column width="100%">
      <h1>Simple HTML like headings and paragraphs</h1>
    </Column>
  </Section>
</Body>

Compose elements together to create complex email friendly components

class Divider extends Component {

  render() {
    const styles = {
      fontSize: "1px",
      margin: "0 auto",
      borderTop: "1px solid lightgrey",
      width: "100%"
    }

    return (
      <Section>
        <Column width="100%">
          <p style={styles} />
        </Column>
      </Section>
    )
  }
}