React Share Pro

Introduction

react-share-pro is a powerful library for adding customizable social media sharing buttons to your React applications, enabling seamless sharing of content across popular platforms.

Table of Contents

• Installation
• Usage
• Available Components
• Customization
• Props
• Examples
• License
• Contributing
• Contact

Installation

You can install react-share-pro via npm or yarn:

npm install react-share-pro

or

yarn add react-share-pro

Usage

To use the components in your application, import them and add them to your component tree. Below is a basic example:

Basic Example

import React from 'react';
import { FacebookShareButton, TwitterShareButton, LinkedInShareButton } from 'react-share-pro';

const ShareComponent = () => {
  const shareUrl = 'https://yourwebsite.com';
  const title = 'Check out this amazing website!';

  return (
    <div>
      <h2>Share this page:</h2>
      <FacebookShareButton url={shareUrl} title={title}>
        Share on Facebook
      </FacebookShareButton>
      <TwitterShareButton url={shareUrl} title={title}>
        Share on Twitter
      </TwitterShareButton>
      <LinkedInShareButton url={shareUrl} title={title}>
        Share on LinkedIn
      </LinkedInShareButton>
    </div>
  );
};

export default ShareComponent;

Available Components

react-share-pro includes the following components:

• FacebookShareButton: A button to share on Facebook.
• TwitterShareButton: A button to share on Twitter.
• LinkedInShareButton: A button to share on LinkedIn.
• RedditShareButton: A button to share on Reddit.
• WhatsAppShareButton: A button to share via WhatsApp.

Customization

You can customize the buttons by applying your own styles. Here’s how you can add custom styles to your buttons:

CSS Example

.share-button {
  background-color: #3b5998; /* Facebook blue */
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.share-button:hover {
  background-color: #365e8a; /* Darker Facebook blue */
}

Applying Custom Styles

You can apply these styles in your components like this:

<FacebookShareButton className="share-button" url={shareUrl} title={title}>
  Share on Facebook
</FacebookShareButton>

Props

Each component accepts the following props:

• url (string): The URL you want to share.
• title (string): The title for the shared content.
• children (node): The content inside the button (can be text or an icon).
• className (string, optional): Custom CSS class for additional styling.

Examples

Example with All Buttons

Here’s a comprehensive example that includes all available share buttons:

import React from 'react';
import {
  FacebookShareButton,
  TwitterShareButton,
  LinkedInShareButton,
  RedditShareButton,
  WhatsAppShareButton
} from 'react-share-pro';

const ShareAll = () => {
  const shareUrl = 'https://yourwebsite.com';
  const title = 'Check out this amazing website!';

  return (
    <div>
      <h2>Share this page:</h2>
      <FacebookShareButton url={shareUrl} title={title}>
        Share on Facebook
      </FacebookShareButton>
      <TwitterShareButton url={shareUrl} title={title}>
        Share on Twitter
      </TwitterShareButton>
      <LinkedInShareButton url={shareUrl} title={title}>
        Share on LinkedIn
      </LinkedInShareButton>
      <RedditShareButton url={shareUrl} title={title}>
        Share on Reddit
      </RedditShareButton>
      <WhatsAppShareButton url={shareUrl} title={title}>
        Share on WhatsApp
      </WhatsAppShareButton>
    </div>
  );
};

export default ShareAll;

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Contributing

We welcome contributions! Please read our CONTRIBUTING.md for guidelines on how to get started.

Contact

For any questions or feedback, please reach out to [[email protected]].

Thank you for using react-share-pro! We hope it enhances your projects.

Feel free to edit any sections as necessary to match your specific package details!