> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/social.md).

# Social

## Social Share

The `SocialShare` component is a sharing widget for Facebook, Twitter, LinkedIn, and email. It provides buttons to share a URL with a description on these social platforms.

### Preview

<div align="left"><figure><img src="/files/3AfrPnrduIj4umPeA9mc" alt="Gravity social share component" width="237"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { SocialShare } from 'components/lib';

function MyComponent({ ...props }){

  const url = 'https://example.com';
  const description = 'Check out this amazing website!';

  return (
    <div>
      <SocialShare url={ url } description={ description } />
    </div>
  );
}

```

### Props

| Prop        | Description                    |          | value                  |
| ----------- | ------------------------------ | -------- | ---------------------- |
| className   | custom styles                  | optional | SCSS or Tailwind style |
| description | text for the social media post | required | string                 |
| url         | url of the page to share       | required | string                 |

### Notes

* The `SocialShare` component uses the `Button` component from `'components/lib'` to create sharing buttons.
* The `networks` object defines the sharing URLs for Facebook, Twitter, LinkedIn, and email.
* The `className` prop allows for custom styling to be applied.
* The `description` prop provides the text for the social media post.
* The `url` prop specifies the URL of the page to share.

***

## Social Sign-In

Gravity supports [social sign-](/gravity-server/authentication/social-sign-on.md)[ons](/gravity-server/authentication/social-sign-on.md) with over 500+ networks.&#x20;

The `SocialSignin` component provides buttons for signing up or signing in with social networks such as Facebook, Google, Twitter, and 500+ other networks supported by Passport.js.

### Preview

<div align="left"><figure><img src="/files/K4vFM5qZRCUpRjbdmNk0" alt="Gravity social sign-on component" width="375"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { SocialSignin } from 'components/lib';

function MyComponent({ ...props }){

  const networks = ['facebook', 'twitter'];

  return (
    <div>
      <SocialSignin network={ networks } />
    </div>
  );
}

```

### Props

| Prop      | Description                      | Required | Value            |
| --------- | -------------------------------- | -------- | ---------------- |
| className | custom style                     | optional | SCSS or Tailwind |
| invite    | user is being invited as a child | optional | boolean          |
| network   | array of social network names    | required | array            |
| signup    | user is signing up a new account | optional | boolean          |

### Notes

* The `SocialSignin` component uses the `Button`, `cn`, `Grid`, and `useTranslation` components from `'components/lib'`.
* The `network` prop specifies the list of social networks for sign-in/sign-up, each represented as a string.
* The `invite` and `signup` props control whether the user is invited as a child or signing up, respectively.
* The `className` prop allows for custom styling to be applied.
* The `loading` state is managed for each network button to indicate loading status.
* The `serverURL` is constructed based on the current environment settings.