Socket
Socket
Sign inDemoInstall

react-social-btn

Package Overview
Dependencies
2
Maintainers
3
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-social-btn

Buttons Share on social networks with the number of users to rate for React.


Version published
Maintainers
3
Install size
719 kB
Created

Readme

Source

react-social-btn

Buttons "Share" on social networks with the number of users to rate for React.

NPM JavaScript Style Guide

Install

This package requires node >= 4, but we recommend node >= 8.

yarn add react-social-btn

Usage

import React from 'react';

import {ShareButton, SocialList} from 'react-social-btn';

const Example = () => {
    const list = [
        {
            name: 'vk',
            textButton: 'Vkontakte',
            utm: '?utm' //optional
        },
        {
            name: 'mail',
            textButton: 'My@Mail.ru',
            utm: '?utm' //optional
        },
        {
            name: 'ok',
            textButton: 'Odnoklassniki',
            utm: '?utm' //optional
        },
        {
            name: 'facebook',
            textButton: 'Facebook',
            utm: '?utm' //optional
        },
        {
            name: 'twitter',
            textButton: 'Twitter',
            utm: '?utm' //optional
        },
        {
            name: 'telegram',
            extButton: 'Telegram',
            utm: '?utm' //optional
        },
        {
            name: 'copy',
            extButton: 'Copy link',
            utm: '?utm', //optional
            onClick: () => {
            	console.log('Link copied')
            } //optional
        }
    ];
 
    return (
        <>
            <ShareButton
                title="Share"
                style={{
                    marginBottom: '1em'
                }}
                className="share"
                toCount={true}
                list={list}
                defaultUrl="https://zaycev.net"
                callback={() => console.log('Share click')}
            />
            <SocialList
                style={{
                    marginBottom: '1em'
                }}
                className="share-list"
                list={list}
                toCount={true}
                defaultUrl="https://zaycev.net"
            />
        </>
    );
};

Props

ShareButton
Name propsDefaultOptional propsDescription
titleПоделитьсяTitle button
styleOther styles from Button
classNameExtra className from Button
toCounttruetrue/falseEnabled/Disabled count social share
listAll socialarrayList name and title button
defaultUrlDefault Url
callbackCallback from button click
isSubscribeSubscribe to the community
SocialList
Name propsDefaultOptional propsDescription
styleOther styles from Button
classNameExtra className from Button
toCounttruetrue/falseEnabled/Disabled count social share
listAll socialarrayList name and title button
defaultUrlDefault Url

License

MIT © Zaycev.net

FAQs

Last updated on 26 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc