# react-marmalade

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

Latest version **1.0.0** (published 2016-04-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-marmalade
pnpm add react-marmalade
yarn add react-marmalade
bun add react-marmalade
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-04-28 |
| First published | 2016-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jack Callister |
| Maintainers | jarsbe |

## Links

- npm: https://www.npmjs.com/package/react-marmalade
- npm.io page: https://npm.io/package/react-marmalade

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.1

## Recent versions

- 1.0.0 (latest) — 2016-04-28

## 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>
    )
  }
}
```

---
_Source: https://npm.io/package/react-marmalade · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
