Function

The Email component is a very minimal input element. It sets the type to email and the placeholder to the value of the placeholder prop. If no placeholder is set, it will set the placeholder to email@site.com.

The Submit component is a very minimal form submit button. It sets the type to submit and the value to the value of the title prop. If no title is set, it will set the title to Subscribe.

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

{ 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.