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

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

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.