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

Usage

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

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-ons with over 500+ networks.

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

Usage

import { SocialSignin } from 'components/lib';

function MyComponent({ ...props }){

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

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

Props

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.

Last updated