@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