Gravity
  • Welcome to Gravity
  • Getting Started
  • Stack
  • Updates
  • Rules For AI
  • Troubleshooting
  • Gravity Server
    • Introduction
    • Installation
      • Install Node.js
      • Database Setup
      • Stripe Setup
      • Mailgun Setup
      • Install Gravity
    • Application Structure
    • REST API
      • API Scopes
      • Webhooks
    • Authentication
      • Email Verification
      • Social Sign On
      • Two-Factor Authentication
    • Authorization
      • Feature Access and Plan Restrictions
      • Permissions (Roles)
    • Config
    • Environment Variables
    • Database Queries
    • Handling Errors
    • Logging
    • Localization
    • Push Notifications
    • Email Notifications
    • User Feedback
    • User Onboarding
    • File Uploads
    • Billing
      • Seat Billing
      • Usage Billing
    • Free Accounts
    • CLI Toolbelt
    • Testing
    • AI Tools
    • Background Jobs
    • Deployment
  • Gravity Web
    • Introduction
    • Tailwind & SCSS
    • Routing
    • Events
    • Authentication
    • Localization
    • Hooks
      • useAPI
      • usePlans
      • usePermissions
    • Components
      • Alert
      • Animate
      • Avatar
      • Badge
      • Breadcrumb
      • Button
      • Calendar
      • Card
      • Chart
      • Checklist
      • Credit Card
      • Detail
      • Dialog
      • Dropdown
      • Feedback
      • Form
      • Grid
      • Header
      • Helper
      • Icon
      • Image
      • Layout
      • Link
      • List
      • Loader
      • Logo
      • Nav
      • Onboarding
      • Pagination
      • Popover
      • Progress
      • Row
      • Search
      • Separator
      • Sheet
      • Social
      • Stat
      • Table
      • Tabs
      • Toast (Notification)
      • Tooltip
      • User
      • View
    • Views
    • Handling Errors
    • Deployment
  • Gravity Native
    • Introduction
    • Prerequisites
    • Installation
    • App Context
    • Authentication
    • Localisation
    • External Linking
    • Handling Errors
    • Navigation
    • Config
    • Events
    • Views
    • Components
      • Badge
      • Blankslate
      • Button
      • Card
      • Chart
      • Form
      • Global
      • Grid
      • Icon
      • List
      • Logo
      • Message
      • Modal
      • Nav
      • Notification
      • Progress Bar
      • Search
      • Separator
      • Social
      • Stat
      • View
    • Push Notifications
    • Payments
    • Building Your App
  • Mission Control
    • Introduction
    • Installation
    • User Management
    • Feedback
    • Events
    • Logs
  • Website Template
    • Introduction
    • Environment Variables
    • Styling
    • Components
      • Article
      • Feature List
      • Footer
      • Hero
      • Layout
      • Pricing
      • Meta Data
      • Nav
      • Testimonial
    • Build and Deploy
Powered by GitBook
On this page
  • Social Share
  • Preview
  • Usage
  • Props
  • Notes
  • Social Sign-In
  • Preview
  • Usage
  • Props
  • Notes

Was this helpful?

  1. Gravity Web
  2. Components

Social

PreviousSheetNextStat

Last updated 9 months ago

Was this helpful?

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

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.

Gravity supports with over 500+ networks.

social sign-
ons
Gravity social share component
Gravity social sign-on component