Documentation

Icon 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 { FacebookIcon } from 'share-button-links-react/components/icons';

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


  <FacebookIcon
    title="..."
    url="..."
    isRounded
  />

Props

With * is required.

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

Usage


  <WhatsappIcon
    text="..."
    url="..."
    message="..."
    isRounded
  />

Props

With * is required.

Prop	Type	Default	Comment
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.

Usage


  <TelegramIcon
    url="..."
    message="..."
    isRounded
  />

Props

With * is required.

Prop	Type	Default	Comment
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.

Twitter

Usage


  <TwitterIcon
    title="..."
    url="..."
    isRounded
  />

Props

With * is required.

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

Usage


  <LinkedInIcon
    url="..."
    isRounded
  />

Props

With * is required.

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

Usage


  <RedditIcon
    title="..."
    url="..."
    isRounded
  />

Props

With * is required.

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

Usage


  <PinterestIcon
    description="..."
    url="..."
    mediaUrl="..."
    isRounded
  />

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


  <TumblrIcon
    title="..."
    content="..."
    url="..."
    isRounded
  />

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.
url*	String	#!	The url of the button/link to share.
isRounded	Boolean	false	Add little rounded corners.

Pocket

Usage


  <PocketIcon
    title="..."
    url="..."
    isRounded
  />

Props

With * is required.

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

Email

Usage


  <EmailIcon
    title="..."
    subject="..."
    content="..."
    url="..."
    isRounded
  />

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

Copy

Usage


  <CopyIcon
    isRounded
    hasIcon
    url="..."
  />

Props

With * is required.

Just click the button to copy the URL.

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