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 .
- Features
- Installation
- Version
- Usage
- Available Components
- Customization
- Props
- License
- Contributing
- Issues
- New_Feature
- Contact
- 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:
You can install react-share-pro
via npm or yarn:
npm install react-share-pro
or
yarn add react-share-pro
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.
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:
To use react-share-pro
, import the desired components and render them in your React application. Below is a basic example:
import React from "react";
import {
FacebookShareButton,
TwitterShareButton,
EmailShareButton,
} from "react-share-pro";
const ShareComponent = () => {
const shareUrl = "https://yourwebsite.com";
const shareText = "Check out this amazing website!";
const isDefault = true;
return (
<div>
<h2>Share this page:</h2>
<FacebookShareButton url={shareUrl} text={shareText} isDefault={isDefault}>
Share on Facebook
</FacebookShareButton>
<TwitterShareButton url={shareUrl} text={shareText} isDefault={isDefault}>
Share on Twitter
</TwitterShareButton>
<EmailShareButton
subject='Amazing Website'
body='Check out this amazing website!'
isDefault={isDefault}>
Share via Email
</EmailShareButton>
</div>
);
};
export default ShareComponent;
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.
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:
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.
import React from "react";
import FacebookIcon from "./icons/facebook-icon.png"; // Assuming you have a PNG icon
const ShareComponent = () => {
const shareUrl = "https://yourwebsite.com";
const shareText = "Check out this amazing website!";
return (
<div>
<h2>Share this page:</h2>
<FacebookShareButton url={shareUrl} text={shareText} isDefault={false}>
<img
src={FacebookIcon}
alt='Facebook'
style={{ width: "20px", marginRight: "5px" }}
/>
Share on Facebook
</FacebookShareButton>
</div>
);
};
export default ShareComponent;
.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 */
}
You can apply these styles in your components like this:
<FacebookShareButton
className='share-button'
url={shareUrl}
title={title}
isDefault={false}>
Share on Facebook
</FacebookShareButton>
Each react-share-pro
component accepts specific props:
- url (string): The URL you want to share or window.location.href .
- text (string): The title for the shared content.
- url (string): The URL you want to share or window.location.href.
- text (string): The title for the shared content.
- subject (string): The subject line for the email.
- body (string): The body content of the email.
- text (string): The text content for the instagram.
- 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
<FacebookShareButton url='https://yourwebsite.com' text='Check this out!'>
Share on Facebook
</FacebookShareButton>
<EmailShareButton
subject='Amazing Website'
body='Check out this amazing website!'>
Share via Email
</EmailShareButton>
This project is licensed under the MIT License. See the LICENSE file for more information.
We welcome contributions! Please read our CONTRIBUTING.md for guidelines on how to get started.
If you encounter any issues, please read our ISSUES.md for guidlines how to submit a issue .
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.
For any questions or feedback, please reach out to [jyotiprakash.panigrahi055@gmail.com].