react-contact-buttons

Contact buttons to copy to clipboard, open in Whatsapp, Telegram, Skype, call, send sms to a number and send a mail with Gmail or Outlook. The behavior of the buttons adapts depending on whether the user is using a desktop computer or a mobile phone.

Installation and Usage

Install it via yarn or npm

yarn add react-contact-buttons

or

npm install react-contact-buttons

Then import the buttons, add component, props and children to use them:

import React from "react";
import { 
    CopyToClipboard, 
    OpenWhatsApp, 
    OpenTelegram, 
    OpenSkypeSoftware, 
    OpenGmail, 
    OpenOutlook, 
    CallTo, 
    SmsTo 
} from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <ComponentName props > children </ComponentName>
    </div>
);

Props

You can use and customize these buttons using the below props, out of which "tel", "to", "tUser" and "sUser" are the only required prop, the rest are optional.

Name	Type	Default	Description
tel	String	none	The telephone number to be used (Only CopyToClipboard, OpenWhatsApp, CallTo and SmsTo).
msg	String	none	The message to be added automatically and sent (Only OpenWhatsApp and SmsTo).
tUser	String	none	The user phone number or username to be used (Only OpenTelegram).
sUser	String	none	The user to be used (Only OpenSkypeSoftware).
action	String	chat	Choose action with these options: "chat", "call" or "videoCall" (Only OpenSkypeSoftware).
to	String	none	The email to be used (Only OpenGmail and OpenOutlook).
cc	String	none	The email to be used like CC (Only OpenGmail and OpenOutlook).
bcc	String	none	The email to be used like CCO (Only OpenGmail and OpenOutlook).
subject	String	none	The subject to be used in the mail (Only OpenGmail and OpenOutlook).
body	String	none	The body to be used in the mail (Only OpenGmail and OpenOutlook).
linkToUse	String	live	Choose mail link with these options: "live" or "office365" (Only OpenOutlook).
onCopy	Function	false	Used to recive true or false if it was possible or not make the copy (Only CopyToClipboard).
children	React.ReactNode	a text	Use this to add some custom content inside the button (All).
buttonProps	React.ButtonHTMLAttributes	none	Use this to add properties for the button element (All).

Examples

CopyToClipboard

import React from "react";
import { CopyToClipboard } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <CopyToClipboard 
            tel="[phone]" 
            onCopy={(e) => console.log(e)} 
        />
    </div>
);

Basic button (If no styles and children are applied) it will look like this: and you will see true or false in console.

OpenWhatsApp

import React from "react";
import { OpenWhatsApp } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <OpenWhatsApp 
            tel="[phone]" 
            msg="Some Message"
            style={{ 
                backgroundColor: 'transparent', 
                border: 'none', 
                borderRadius: '12px', 
                margin: '0px', 
                padding: '0px' 
            }}
        >
            <img alt="Chat on WhatsApp" src="WhatsAppButtonGreenLarge.svg" />
        </OpenWhatsApp>
    </div>
);

Button with some styles and an image as children, looks like this: Download image here

OpenTelegram

import React from "react";
import { OpenTelegram } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <OpenTelegram 
            tUser="[phone]" or "username" 
            style={{ 
                backgroundColor: 'transparent', 
                border: 'none', 
                borderRadius: '50%', 
                margin: '0px', 
                padding: '0px' 
            }}
        >
            <img alt="Chat on Telegram" src="Logo.svg" width="50px" height="50px"/>
        </OpenTelegram>
    </div>
);

Button with some styles and an image as children, looks like this: Download image here

OpenSkypeSoftware

import React from "react";
import { OpenSkypeSoftware } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <OpenSkypeSoftware 
            sUser="Skype name" 
            action="chat" 
            style={{ backgroundColor: 'transparent', border: 'none' }}
        >
            <img alt="Skype Software" src="chatbutton_32px.png" />
        </OpenSkypeSoftware>
    </div>
);

Button with some styles and an image as children, looks like this: Download image here, please follow the brand-guidelines for the correct use of the name, icons and images.

OpenGmail

import React from "react";
import { OpenGmail } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <OpenGmail 
            to="[e-mail]" 
            cc="[e-mail]" 
            bcc="[e-mail]" 
            subject="Some subject" 
            body="Some body"
            className={"btn btn-primary"}
        >
            Use Gmail
        </OpenGmail>
    </div>
);

Button with Bootstrap class and a text as children, looks like this: (you must have bootstrap installed in your project).

OpenOutlook

import React from "react";
import { OpenOutlook } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <OpenOutlook 
            to="[e-mail]" 
            cc="[e-mail]" 
            bcc="[e-mail]" 
            subject="Some subject" 
            body="Some body" 
            className="contact"
        >
            Use Outlook
        </OpenOutlook>
    </div>
);

Button if you add some css styles and a text as children, looks like this:

CallTo

import React from "react";
import { CallTo } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <CallTo tel="[phone]" title="Press to Call" />
    </div>
);

Button if you add title text, the classic tooltip will appear, looks like this:

SmsTo

import React from "react";
import { SmsTo } from 'react-contact-buttons'

const YourComponent = () => (
    <div>
        <SmsTo 
            tel="[phone]" 
            msg="Some Message"
        />
    </div>
);

The idea is to build something pressable so that the user can interact with the page and make the contact.