React Html Email Components

Pure components implemented in pure html and inline styles, which can be used to send html emails directly.

Installation

• install from npm

yarn config set registry https://npm.shopee.io
yarn add html-email-rc

List of components

• Table
• Descriptions
• Tag
• Title

Table

| property | type | required | default | description | | ---------- | ------------------- | -------- | ------- | --------------------------------- | | dataSource | Record<string, any> | ✔️ | - | Data record array to be displayed | | columns | IColumn[] | ✔️ | - | Columns of table | | rowKey | string | - | 'index' | Row's unique key |

import { Table } from "html-email-rc";

const Com = () => {
  const dataSource = [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
    },
    {
      id: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
    },
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
    },
    {
      title: "Information",
      dataIndex: "age",
      colSpan: 2,
    },
    {
      title: "Address",
      colSpan: 0,
      dataIndex: "address",
      render(address) {
        return <span>{address}</span>;
      },
    },
  ];

  return <Table columns={columns} dataSource={dataSource} />;
};

Descriptions

| property | type | required | default | description | | ---------- | ------------------- | -------- | ------- | --------------------------------- | | dataSource | Record<string, any> | ✔️ | - | Data record array to be displayed | | items | IDescriptionsItem[] | ✔️ | - | Items of descriptions list |

import { Descriptions } from "html-email-rc";

const Com = () => {
  const dataSource = {
    id: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  };

  const items = [
    {
      label: "User Basic Info",
      dataIndex: "name",
      render(name, record) {
        return (
          <span>
            {name}-{record.age}
          </span>
        );
      },
    },
    {
      label: "Address",
      dataIndex: "address",
    },
  ];

  return <Descriptions items={items} dataSource={dataSource} />;
};

Tag

| property | type | required | default | description | | ------------- | ---------------------------------------- | -------- | ------- | ---------------------- | | color | 'gray'|'green'|'red'|'blue'|'orange' | - | 'gray' | Color of the Tag | | withoutBorder | boolean | - | false | Whether to show border |

import { Tag } from "html-email-rc";

const Com = () => {
  return <Tag color="green">Success</Tag>;
};

Title

| property | type | required | default | description | | -------- | ------ | -------- | ------- | ----------- | | title | string | ✔️ | - | Title |

import { Title } from "html-email-rc";

const Com = () => {
  return <Title title="Information" />;
};

Get html to send html email

import React, { useRef } from "react";
import { Tag, Title } from "html-email-rc";
import { Button } from "infrad";

const Email = () => {
  const contentRef = useRef<HTMLDivElement>();

  const handleSendEmail = () => {
    // get html string to send html email
    const htmlString = contentRef.current.outerHTML;
  };

  return (
    <div>
      <Button onClick={handleSendEmail}>Share</Button>
      <div ref={contentRef}>
        <Title title="Information" />
        <Tag color="green">Success</Tag>
      </div>
    </div>
  );
};