# @drosarl/email-signature-ui

> react inky version made by drosarl. this library inject the style directly in the component and uses typescript.

Latest version **1.0.6** (published 2020-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @drosarl/email-signature-ui
pnpm add @drosarl/email-signature-ui
yarn add @drosarl/email-signature-ui
bun add @drosarl/email-signature-ui
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-07-06 |
| First published | 2020-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 144.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | drosarl |
| Maintainers | drosarl |

## Links

- npm: https://www.npmjs.com/package/@drosarl/email-signature-ui
- Repository: https://github.com/drosarl/email-signature-ui
- Homepage: https://github.com/drosarl/email-signature-ui#readme
- Issues: https://github.com/drosarl/email-signature-ui/issues
- npm.io page: https://npm.io/package/@drosarl/email-signature-ui

## Recent versions

- 1.0.6 (latest) — 2020-07-06
- 1.0.5 — 2020-07-02
- 1.0.4 — 2020-06-23
- 1.0.3 — 2020-06-14
- 1.0.2 — 2020-06-14
- 1.0.1 — 2020-06-08
- 1.0.0 — 2020-06-08

## README

# @drosarl/email-signature-ui

> react inky version made by drosarl. this library inject the style directly in the component and uses typescript.

[![NPM](https://img.shields.io/npm/v/@drosarl/email-signature-ui.svg)](https://www.npmjs.com/package/@drosarl/email-signature-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @drosarl/email-signature-ui
```

## Usage

import the fonts in your html file

```html
<link
  href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Expanded&family=Lato:wght@400;900&family=Lekton:ital,wght@0,400;0,700;1,400&family=Roboto:wght@400;900&family=Seaweed+Script&display=swap"
  rel="stylesheet"
/>
```

```tsx
import * as React from "react";

import "@drosarl/react-signature-ui/dist/index.css";

import {
  Container,
  Row,
  Column,
  Text,
  Image,
  Button
} from "@drosarl/email-signature-ui";

export default class Example extends React.Component {
  render() {
    return (
      <Container>
        <Row>
          <Column>
            <Image
              src="https://www.drosarl.com/medias/logo.png"
              href="https://www.drosarl.com"
            />
          </Column>
          <Column size="8">
            <Text>Hello World</Text>
          </Column>
        </Row>
        <Row>
          <Column>
            <Button href="https://www.drosarl.com">
              <Text>GoodBye Moon</Text>
            </Button>
            <Text href="https://www.drosarl.com">GoodBye Moon</Text>
          </Column>
        </Row>
      </Container>
    );
  }
}
```

## Components

- Inky
- Container
- Row
- Column
- Text
- Image
- Button

---

### Container

This is the main component. each signature should have only one `<Container />` which wrapped all the code has children

#### Example

```tsx
import * as React from "react";

import { Container } from "@drosarl/email-signature-ui";

export default class Example extends React.Component {
  render() {
    return <Container>{/* your code goes here */}</Container>;
  }
}
```

#### Props

- color : string

---

## Todo

- [ ] force column elastic when the column size sum exceed 12
- [ ] add background image to container
- [ ] add row bgimage
- [ ] add container bgimage
- [ ] implement text type to add text placeholder
- [ ] add more fonts
- [ ] complete documentation
- [ ] add text decoration to Text component

## License

MIT © [drosarl](https://github.com/drosarl)

---
_Source: https://npm.io/package/@drosarl/email-signature-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._