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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/social.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.