react-share-pro

Welcome to react-share-pro 👋

!npm bundle size

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:

``bash
npm install react-share-pro
`

or

`bash
yarn add react-share-pro
`

Version Information

$3

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.

$3

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:

$3

`javascript
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 (


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.
- 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:

$3

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.

$3

`javascript
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 (


export default ShareComponent;
`

$3

`css
.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 /
}
`

$3

You can apply these styles in your components like this:

`javascript
className='share-button'
url={shareUrl}
title={title}
isDefault={false}>
Share on Facebook

`

Props

Each react-share-pro component accepts specific props:

$3

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

$3

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

$3

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

$3

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

$3

- 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

$3

#### Facebook Share Example

`javascript

Share on Facebook

`

#### Email Share Example

`javascript
subject='Amazing Website'
body='Check out this amazing website!'>
Share via Email

`

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].