Welcome to 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

• Features
• Installation
• Version
• Usage
• Available Components
• Customization
• Props
• License
• Contributing
• Issues
• New_Feature
• Contact

Features

• no external script loading, i.e. no dependencies on SDKs
• supports tree shaking with ES modules
• use own style pop-up window
• share buttons for:
  • Facebook
  • Twitter
  • Email
  • Instagram

Installation

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

1npm install react-share-pro

or

1yarn add react-share-pro

Version Information

Current Version: 2.1.8

This is an alpha version of react-share-pro. It includes the latest features and improvements but may also contain bugs or unfinished functionality. We encourage developers to test this version but recommend using it in non-production environments.

Previous Stable Version: 2.1.5

If you prefer stability over new features, you may choose to use the latest stable version. It is well-tested and suitable for production environments. You can install it by running:

Usage

To use react-share-pro, import the desired components and render them in your React application. Below is a basic example:

Basic Example

1import React from "react";
2import {
3	FacebookShareButton,
4	TwitterShareButton,
5	EmailShareButton,
6} from "react-share-pro";
7
8const ShareComponent = () => {
9	const shareUrl = "https://yourwebsite.com";
10	const shareText = "Check out this amazing website!";
11	const isDefault = true;
12	return (
13		<div>
14			<h2>Share this page:</h2>
15			<FacebookShareButton url={shareUrl} text={shareText} isDefault={isDefault}>
16				Share on Facebook
17			</FacebookShareButton>
18			<TwitterShareButton url={shareUrl} text={shareText} isDefault={isDefault}>
19				Share on Twitter
20			</TwitterShareButton>
21			<EmailShareButton
22				subject='Amazing Website'
23				body='Check out this amazing website!'
24				isDefault={isDefault}>
25				Share via Email
26			</EmailShareButton>
27		</div>
28	);
29};
30
31export 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.
• EmailShareButton: A button to share on Email.
• InstagramShareButton: A button to share on Instagram.

Customization

react-share-pro customize the buttons by applying your own styles and configurations. Here’s how you can enhance the appearance and behavior of your buttons:

Custom Children

You can pass any React node as children to the share buttons, allowing you to use custom images, SVGs, or text. This gives you the flexibility to design buttons that fit your application's branding.

Example

1import React from "react";
2import FacebookIcon from "./icons/facebook-icon.png"; // Assuming you have a PNG icon
3
4const ShareComponent = () => {
5	const shareUrl = "https://yourwebsite.com";
6	const shareText = "Check out this amazing website!";
7
8	return (
9		<div>
10			<h2>Share this page:</h2>
11			<FacebookShareButton url={shareUrl} text={shareText} isDefault={false}>
12				<img
13					src={FacebookIcon}
14					alt='Facebook'
15					style={{ width: "20px", marginRight: "5px" }}
16				/>
17				Share on Facebook
18			</FacebookShareButton>
19		</div>
20	);
21};
22
23export default ShareComponent;

costum CSS Example

1.share-button {
2	background-color: #3b5998; /* Facebook blue */
3	color: white;
4	padding: 10px 15px;
5	border-radius: 5px;
6	text-align: center;
7	cursor: pointer;
8	transition: background-color 0.3s;
9}
10
11.share-button:hover {
12	background-color: #365e8a; /* Darker Facebook blue */
13}

Applying Custom Styles

You can apply these styles in your components like this:

1<FacebookShareButton
2	className='share-button'
3	url={shareUrl}
4	title={title}
5	isDefault={false}>
6	Share on Facebook
7</FacebookShareButton>

Props

Each react-share-pro component accepts specific props:

FacebookShareButton

• url (string): The URL you want to share or window.location.href .
• text (string): The title for the shared content.

TwitterShareButton

• url (string): The URL you want to share or window.location.href.
• text (string): The title for the shared content.

EmailShareButton

• subject (string): The subject line for the email.
• body (string): The body content of the email.

InstagramShareButton

• text (string): The text content for the instagram.

Common Props (optional)

• children (node): The content inside the button (can be text or an icon).
• className (string, optional): Custom CSS class for additional styling.
• tab (string, optional): The target for the email link (default is '_blank').
• isDefault (boolean): Whether to use the default Facebook share button or a custom one

Examples

Facebook Share Example

1<FacebookShareButton url='https://yourwebsite.com' text='Check this out!'>
2	Share on Facebook
3</FacebookShareButton>

Email Share Example

1<EmailShareButton
2	subject='Amazing Website'
3	body='Check out this amazing website!'>
4	Share via Email
5</EmailShareButton>

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.

Issues

If you encounter any issues, please read our ISSUES.md for guidlines how to submit a issue .

New_Feature

We welcome contributing a new feature to react-share-pro Please read our NEW_FEATURE.md for guidelines for how to propose a new feature.

Contact

For any questions or feedback, please reach out to [jyotiprakash.panigrahi055@gmail.com].