renimail-react

renimail-react is a React component library for adding contacts to a mailing list. It provides an easy-to-use interface for collecting user information and subscribing them to your newsletter.

Installation

To install renimail-react, run the following command in your project directory:

npm install renimail-react

or if you're using yarn:

yarn add renimail-react

Usage

Here's a basic example of how to use the RenimailAddContact component:

import React from 'react';
import RenimailAddContact from 'renimail-react';

const MyComponent = () => {
  return (
    <RenimailAddContact
      url="https://api.reni.ng/reni-mail/v1/createList"
      token="your-api-token"
      listToken="your-list-token"
    />
  );
};

export default MyComponent;

Components

RenimailAddContact

The main component for adding contacts to your mailing list.

Props

• url (string, required): The API endpoint for subscribing users.
• token (string, required): Your API authentication token.
• listToken (string, required): The token for the specific mailing list.
• render (function, optional): A custom render function for the form. If not provided, it uses the default SimpleForm component.

Example with custom render function

import React from 'react';
import RenimailAddContact from 'renimail-react';

const CustomForm = ({ subscribe, status, message }) => {
  // Your custom form implementation
};

const MyComponent = () => {
  return (
    <RenimailAddContact
      url="https://api.reni.ng/reni-mail/v1/createList"
      token="your-api-token"
      listToken="your-list-token"
      render={({ subscribe, status, message }) => (
        <CustomForm
          subscribe={subscribe}
          status={status}
          message={message}
        />
      )}
    />
  );
};

export default MyComponent;

SimpleForm

A pre-styled form component used as the default render option for RenimailAddContact.

Props

• status (string): The current status of the form submission ('sending', 'success', or 'error').
• message (string): A message to display based on the submission status.
• style (object): Custom styles to apply to the form container.
• className (string): Custom CSS class for the form container.
• onSubmitted (function): Callback function to handle form submission.

Styling

The SimpleForm component comes with default styling. You can customize its appearance by passing a style prop or a className prop to the RenimailAddContact component.

API Reference

The component uses Axios to make a POST request to the provided URL. The request includes the following:

• Headers:
  • Authorization: Basic ${token}
  • Content-Type: 'application/json'
• Body:
  • mail: User's email address
  • firstname: User's first name
  • lastname: User's last name
  • listToken: The provided list token

Error Handling

The component handles errors and displays appropriate messages based on the API response. If there's an error, it will be displayed in the form.

Tutorial

For more details on how to use the renimail-react component please check out this tutorial

https://medium.com/@enisfiyinfoluwa/how-to-use-renimail-react-for-your-email-subscription-form-6caef7c6536b

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

License

This software is proprietary and closed source. All rights are reserved by FireSwitch Technologies Ltd. Unauthorized copying, modification, or distribution of this software is strictly prohibited.

To obtain permission to use this software, please contact [email protected].