# reactjs-social-kit

> Group of logins of the world's major social networks and their activities

Latest version **1.0.3** (published 2022-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-social-kit
pnpm add reactjs-social-kit
yarn add reactjs-social-kit
bun add reactjs-social-kit
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-09-30 |
| First published | 2021-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 334.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | dodinhthang |
| Maintainers | dothang |
| Keywords | react, social, facebook, twitter, pinterest, google, twitter, google, javascript, login-social, react-login-social, instagram, linkedin, line |

## Links

- npm: https://www.npmjs.com/package/reactjs-social-kit
- Repository: https://github.com/dodinhthang/reactjs-social-kit
- Homepage: https://github.com/dodinhthang/reactjs-social-kit#readme
- Issues: https://github.com/dodinhthang/reactjs-social-kit/issues
- npm.io page: https://npm.io/package/reactjs-social-kit

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-09-30
- 1.0.2 — 2022-09-30
- 1.0.1 — 2021-12-13
- 1.0.0 — 2021-12-11

## README

# reactjs-social-kit

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

![img-description](./demo.png)

[![NPM](https://img.shields.io/npm/v/reactjs-social-kit.svg)](https://www.npmjs.com/package/reactjs-social-kit)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![node version](https://img.shields.io/badge/node.js-%3E=_6-green.svg?style=flat)](http://nodejs.org/download/)
[![npm download](https://img.shields.io/npm/dm/reactjs-social-kit.svg?style=flat)](https://www.npmjs.com/package/reactjs-social-kit)
[![npm bundle zip](https://img.shields.io/bundlephobia/minzip/reactjs-social-kit?style=flat)](https://www.npmjs.com/package/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`

```bash
npm install --save reactjs-social-kit
```

Use `yarn`

```bash
yarn add reactjs-social-kit
```

## Usage

> Login with Facebook

- Create a app on Facebook Developer and get `appId` in [here](https://developers.facebook.com/apps/)

```tsx
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](https://console.developers.google.com/apis/credentials)

```tsx
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. |

<br/>

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

MIT © [dodinhthang](https://github.com/dodinhthang)(Thang Do)

---
_Source: https://npm.io/package/reactjs-social-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._