tons613-react-sharingbuttons v1.0.6

react-sharingbuttons

Lightweight social sharing buttons for React. No tracking. Just fun. Heavily inspired by sharingbuttons.io

Demo & Docs:

https://caspg.github.io/react-sharingbuttons

Installation

  yarn add tons613-react-sharingbuttons

or alternatively:

npm install --save tons613-react-sharingbuttons

Usage

import { Facebook, Twitter } from "tons613-react-sharingbuttons";

NOTE If you care about your bundle size, you can import each button separately.

import Facebook from "react-sharingbuttons/dist/buttons/Facebook";
import Twitter from "react-sharingbuttons/dist/buttons/Twitter";

Import predefined css:

import "react-sharingbuttons/dist/main.css";

const sharingButtons = () => {
  const url = "https://github.com/caspg/react-sharingbuttons";
  const shareText = "Check this site!";

  return (
    <div>
      <Facebook url={url} />
      <Twitter url={url} shareText={shareText} />
    </div>
  );
};

See the example

Overriding styles

You can customize buttons further to meet your needs. For example, following html will be rendered for Twitter button:

<a
  href="https://your.website"
  class="react-sharing-button__link react-sharing-button--twitter"
>
  <svg class="react-sharing-button__icon">...</svg>
  <span class="react-sharing-button__text">Share me</span>
</a>

Available buttons and its props

common props:

• text - text which is displayed inside button, default to button name.
• onClick - onClick event passed to a tag.

button specific props: