---
name: Share
route: /components/common/share
edit: false
---

import { Playground, Props } from 'docz'
import Share from './share'

# Share

<hr />

## Share
### Description
A component to enable users to share links and content on specified platforms

<Playground>
    <Share
       url='https://www.economist.com/leaders/2020/01/15/how-vladimir-putin-is-preparing-to-rule-for-ever'
       platforms={['Facebook', 'Twitter', 'LinkedIn', 'WhatsApp']}
       text='You will like this story - economist.com '
       longtext='Take a look at this article I just found.'
     />
</Playground>

<hr />

## Share (with callback)
### Description
Making use of a callback so users of this control can be notified when a sharing action has been made
(eg. for analytics). View the Developer Tools console to see the callback response.

<Playground>
    <Share
        url='https://www.economist.com/leaders/2020/01/15/how-vladimir-putin-is-preparing-to-rule-for-ever'
        platforms={['Facebook', 'Twitter', 'LinkedIn', 'WhatsApp']}
        text='You will like this story - economist.com '
        longtext='Take a look at this article I just found.'
        onShare={(params) => {
          console.log(`You clicked the ${params.platform} icon`);
        }}
    />
</Playground>

<hr />

## Share (inverse)
### Description
A component to enable users to share links and content on specified platforms

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
    <Share
        inverse
        url='https://www.economist.com/leaders/2020/01/15/how-vladimir-putin-is-preparing-to-rule-for-ever'
        platforms={['Facebook', 'Twitter', 'LinkedIn', 'WhatsApp']}
        text='You will like this story - economist.com '
        longtext='Take a look at this article I just found.'
     />
</Playground>

<hr />

## Properties
<Props of={Share} />