@drosarl/email-signature-ui

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

Install

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

Usage

import the fonts in your html file

<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"
/>

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

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