React-tinyletter NPM

Setup

$ npm install --save react-tinyletter

or...

$ yarn add react-tinyletter

Usage

The TinyLetter component acts as a wrapper for the subscription form. It automatically populates itself with input fields if no children are added. You can also manually add the children elements. Below are some examples of the various implementations.

Using the auto-injected inputs

import { TinyLetter } from 'react-tinyletter';
...
<TinyLetter list="YourTinyLetterUsername"/>

Using the included input components

import { TinyLetter, Email, Submit } from 'react-tinyletter';
...
<TinyLetter list="YourTinyLetterUsername">
  <Email/>
  <Submit/>
</TinyLetter>

Using input primitives

import { TinyLetter } from 'react-tinyletter';
...
<TinyLetter list="YourTinyLetterUsername">
  <input type="email"/>
  <input type="submit" value="Subscribe"/>
</TinyLetter>

You need not worry about assigning the name or id properties on form inputs, they will automatically get added by the TinyLetter component. However, make sure that you use the correct type on your input fields if using primitives, as the type is how the TinyLetter component is able to determine which input is which.

Style it with <💅>

import { TinyLetter, Email, Submit } from 'react-tinyletter'
import styled from 'styled-components'

...

const StyledEmail = styled(Email)`
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #ccc;
  font-size: 18px;
  font-weight: 100;
  width: 70%;
`

const StyledSubmit = styled(Submit)`
  background: transparent;
  border-bottom-left-radius: 0;
  border-left: none;
  border-top-left-radius: 0;
  border: 1px solid #ccc;
  width: 30%;
  &:hover {
    background-color: #ccc;
    cursor: pointer;
  }
  &:active {
    background-color: deepskyblue;
    color: white;
  }
`
...
<TinyLetter list="TinyLetterUsername">
  <StyledEmail/>
  <StyledSubmit/>
</TinyLetter>