import React from 'react';
import TinyLetter from 'react-tinyletter';

function ComponentExample(props) {
  return (
    <TinyLetter list="YourTinyLetterUsername"/>
  );
}

React.render(<ComponentExample/>, document.getElementById('app'));

Preview

Your form will be automatically populated with the correct action URL and hidden inputs. Even though it's unstyled, it's ready for use!

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

const Input = css`
  box-sizing: border-box;
  box-shadow: none;
  height: 45px;
  border-radius: 5px;
  float: left;
  padding: 8px;
  &:focus {
    border-color: deepskyblue;
    outline: none;
  }
`;

const StyledEmail = styled(Email)`
  ${Input}
  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)`
  ${Input}
  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;
  }
`;


function ComponentExample(props) {
  return (
    <TinyLetter list="TinyLetterUsername">
      <StyledEmail/>
      <StyledSubmit/>
    </TinyLetter>
  );
}

React.render(<ComponentExample/>, document.getElementById('app'));

Preview