reactjs-social-kit

Easier login with social network platforms with reactjs-social-kit

Function

Currently this library has supported and prepared to support the following functions:

1. Google
2. Facebook
3. Instagram (coming soon)
4. Microsoft (coming soon)
5. Linkedin (coming soon)
6. Github (coming soon)
7. Amazon (coming soon)
8. Pinterest (coming soon)
9. Twitter (coming soon)

Install

Use npm

npm install --save reactjs-social-kit

Use yarn

yarn add reactjs-social-kit

Usage

Login with Facebook

• Create a app on Facebook Developer and get appId in here

import React, { useRef } from 'react'
import {
  ButtonLogin,
  FacebookIcon,
  FacebookLogin,
  TypeRef
} from 'reactjs-social-kit'

const App = () => {
  const facebookRef = useRef<TypeRef>(null!)

  return (
    <div style={{ width: 400, margin: '0 auto' }}>
      <FacebookLogin
        appId='xxxxxxxxxxxxxxx' // Facebook appId
        ref={facebookRef}
        onLoginSuccess={(res: any) => console.log(res)}
        onFailure={() => console.log('false')}
      >
        <ButtonLogin
          style={{ backgroundColor: '#1877F3' }}
          text='Login with Facebook'
          icon={<FacebookIcon style={{ margin: 5 }} />}
        />
      </FacebookLogin>
    </div>
  )
}

export default App

Props

Property	Type	Default	Description
onLoginSuccess	function	undefined	Required function called on successful login.
onFailure	function	undefined	Optional Function called when login failed.
appId	string	undefined	Required appId.
style	object	undefined	Optional style overrides for root element.
className	string	undefined	Optional className override for root element.
...	...	undefined	All other props are applied to the root element.

Login with Google

• Create a credential on Google Console and get clientId in here

import React, { useRef } from 'react'

import {
  ButtonLogin,
  GoogleIcon,
  GoogleLogin,
  GoogleSuccessData,
  TypeRef
} from 'reactjs-social-kit'

const App = () => {
  const googleRef = useRef<TypeRef>(null!)

  return (
    <div style={{ width: 400, margin: '0 auto' }}>
      <GoogleLogin
        clientId='xxxxxxxxxxxxxxxxxxxx' // Google client id
        ref={googleRef}
        onLoginSuccess={(res: GoogleSuccessData) => console.log(res)}
        onFailure={() => console.log('false')}
      >
        <ButtonLogin
          style={{ backgroundColor: '#fff', color: '#888' }}
          text='Login with Google'
          icon={<GoogleIcon style={{ margin: 5 }} />}
        />
      </GoogleLogin>
    </div>
  )
}

export default App

Props

Property	Type	Default	Description
onLoginSuccess	function	undefined	Required function called on successful login.
onFailure	function	undefined	Optional Function called when login failed.
appId	string	undefined	Required appId.
style	object	undefined	Optional style overrides for root element.
className	string	undefined	Optional className override for root element.
...	...	undefined	All other props are applied to the root element.

License

I'm very happy to receive suggestions and contributions from everyone <3

MIT © dodinhthang(Thang Do)