Documentation

Buttons

Installation

You can install it using yarn add share-button-links-react or npm install share-button-links-react.

To import it inside your components just add:

import { ButtonFacebook } from 'share-button-links-react/components/buttons';

To import the CSS or SCSS just add: @import 'share-button-links-react/main.css'; or @import 'share-button-links-react/main.scss';.

Note: Most of the svg icons in buttons belong to Bootstrap Icons. and others to Tabler Icons.

Facebook

Usage

Facebook


  <ButtonFacebook
    title="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title	String	Empty	The title of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the facebook icon.

Usage


  <ButtonWhatsapp
    text="..."
    url="..."
    message="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
message	String	Empty	Here you can add a message when you share the url to Whatsapp.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the whatsapp icon.

Usage


  <ButtonTelegram
    text="..."
    url="..."
    message="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
message	String	Empty	Here you can add a message when you share the url to Whatsapp.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the telegram icon.

Twitter

Usage

Twitter


  <ButtonTwitter
    title="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title*	String	Add titke	The title of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the twitter icon.

Usage


  <ButtonLinkedIn
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the linkedin icon.

Usage


  <ButtonReddit
    title="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the reddit icon.

Usage


  <ButtonPinterest
    description="..."
    url="..."
    text="..."
    mediaUrl="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
description*	String	Add the description	The description of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
mediaUrl*	String	#!	The image of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the pinterest icon.

Tumblr

Usage

Tumblr


  <ButtonTumblr
    title="..."
    content="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
content	String	Add your content	The content of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the tumblr icon.

Pocket

Usage

Pocket


  <ButtonPocket
    title="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title	String	Empty	The title of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the pocket icon.

Email

Usage


  <ButtonEmail
    title="..."
    subject="..."
    content="..."
    text="..."
    url="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
subject*	String	Add title	The subject of the button/link.
content*	String	Add your content	The content of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
to	String	empty	The to (email) of the button/link.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the Email icon.

Copy

Usage


  <ButtonCopy
    text="..."
    isRounded
    hasIcon
  />

Props

With * is required.

Just click the button to copy the URL.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
isRounded	Boolean	false	Add little rounded corners.
hasIcon	Boolean	false	Add the copy icon.