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="+123456789" 
            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="+123456789" 
            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="+12345678" 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="[email protected]" 
            cc="[email protected]" 
            bcc="[email protected]" 
            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="[email protected]" 
            cc="[email protected]" 
            bcc="[email protected]" 
            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="+123456789" 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="+123456789" 
            msg="Some Message"
        />
    </div>
);

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