{"id":25600582,"url":"https://github.com/dodinhthang/reactjs-social-kit","last_synced_at":"2025-04-13T06:22:18.439Z","repository":{"id":45454803,"uuid":"437292084","full_name":"dodinhthang/reactjs-social-kit","owner":"dodinhthang","description":"ReactJS login with socical network","archived":false,"fork":false,"pushed_at":"2022-09-30T09:20:31.000Z","size":460,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T23:01:30.471Z","etag":null,"topics":["facebook","facebook-login","google","google-login","react","reactjs","social-login","social-network"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dodinhthang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-11T13:38:04.000Z","updated_at":"2024-09-13T10:03:15.000Z","dependencies_parsed_at":"2022-08-31T20:11:34.688Z","dependency_job_id":null,"html_url":"https://github.com/dodinhthang/reactjs-social-kit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodinhthang%2Freactjs-social-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodinhthang%2Freactjs-social-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodinhthang%2Freactjs-social-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodinhthang%2Freactjs-social-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dodinhthang","download_url":"https://codeload.github.com/dodinhthang/reactjs-social-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248671638,"owners_count":21143138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facebook","facebook-login","google","google-login","react","reactjs","social-login","social-network"],"created_at":"2025-02-21T15:26:57.365Z","updated_at":"2025-04-13T06:22:18.407Z","avatar_url":"https://github.com/dodinhthang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reactjs-social-kit\n\n\u003e Easier login with social network platforms with `reactjs-social-kit`\n\n![img-description](./demo.png)\n\n[![NPM](https://img.shields.io/npm/v/reactjs-social-kit.svg)](https://www.npmjs.com/package/reactjs-social-kit)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![node version](https://img.shields.io/badge/node.js-%3E=_6-green.svg?style=flat)](http://nodejs.org/download/)\n[![npm download](https://img.shields.io/npm/dm/reactjs-social-kit.svg?style=flat)](https://www.npmjs.com/package/reactjs-social-kit)\n[![npm bundle zip](https://img.shields.io/bundlephobia/minzip/reactjs-social-kit?style=flat)](https://www.npmjs.com/package/reactjs-social-kit)\n\n## Function\n\nCurrently this library has supported and prepared to support the following functions:\n\u003e 1.  Google\n\u003e 2.  Facebook\n\u003e 3.  Instagram (coming soon)\n\u003e 4.  Microsoft (coming soon)\n\u003e 5.  Linkedin (coming soon)\n\u003e 6.  Github (coming soon)\n\u003e 7.  Amazon (coming soon)\n\u003e 8.  Pinterest (coming soon)\n\u003e 9.  Twitter (coming soon)\n\n## Install\n\nUse `npm`\n\n```bash\nnpm install --save reactjs-social-kit\n```\n\nUse `yarn`\n\n```bash\nyarn add reactjs-social-kit\n```\n\n## Usage\n\n\u003e Login with Facebook\n\n- Create a app on Facebook Developer and get `appId` in [here](https://developers.facebook.com/apps/)\n\n```tsx\nimport React, { useRef } from 'react'\nimport {\n  ButtonLogin,\n  FacebookIcon,\n  FacebookLogin,\n  TypeRef\n} from 'reactjs-social-kit'\n\nconst App = () =\u003e {\n  const facebookRef = useRef\u003cTypeRef\u003e(null!)\n\n  return (\n    \u003cdiv style={{ width: 400, margin: '0 auto' }}\u003e\n      \u003cFacebookLogin\n        appId='xxxxxxxxxxxxxxx' // Facebook appId\n        ref={facebookRef}\n        onLoginSuccess={(res: any) =\u003e console.log(res)}\n        onFailure={() =\u003e console.log('false')}\n      \u003e\n        \u003cButtonLogin\n          style={{ backgroundColor: '#1877F3' }}\n          text='Login with Facebook'\n          icon={\u003cFacebookIcon style={{ margin: 5 }} /\u003e}\n        /\u003e\n      \u003c/FacebookLogin\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\nProps\n\n| Property         | Type     | Default   | Description                                      |\n| :--------------- | :------- | :-------- | :----------------------------------------------- |\n| `onLoginSuccess` | function | undefined | Required function called on successful login.    |\n| `onFailure`      | function | undefined | Optional Function called when login failed.      |\n| `appId`          | string   | undefined | Required appId.                                  |\n| `style`          | object   | undefined | Optional `style` overrides for root element.     |\n| `className`      | string   | undefined | Optional `className` override for root element.  |\n| `...`            | ...      | undefined | All other props are applied to the root element. |\n\n\u003e Login with Google\n\n- Create a credential on Google Console and get `clientId` in [here](https://console.developers.google.com/apis/credentials)\n\n```tsx\nimport React, { useRef } from 'react'\n\nimport {\n  ButtonLogin,\n  GoogleIcon,\n  GoogleLogin,\n  GoogleSuccessData,\n  TypeRef\n} from 'reactjs-social-kit'\n\nconst App = () =\u003e {\n  const googleRef = useRef\u003cTypeRef\u003e(null!)\n\n  return (\n    \u003cdiv style={{ width: 400, margin: '0 auto' }}\u003e\n      \u003cGoogleLogin\n        clientId='xxxxxxxxxxxxxxxxxxxx' // Google client id\n        ref={googleRef}\n        onLoginSuccess={(res: GoogleSuccessData) =\u003e console.log(res)}\n        onFailure={() =\u003e console.log('false')}\n      \u003e\n        \u003cButtonLogin\n          style={{ backgroundColor: '#fff', color: '#888' }}\n          text='Login with Google'\n          icon={\u003cGoogleIcon style={{ margin: 5 }} /\u003e}\n        /\u003e\n      \u003c/GoogleLogin\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nProps\n\n| Property         | Type     | Default   | Description                                      |\n| :--------------- | :------- | :-------- | :----------------------------------------------- |\n| `onLoginSuccess` | function | undefined | Required function called on successful login.    |\n| `onFailure`      | function | undefined | Optional Function called when login failed.      |\n| `appId`          | string   | undefined | Required appId.                                  |\n| `style`          | object   | undefined | Optional `style` overrides for root element.     |\n| `className`      | string   | undefined | Optional `className` override for root element.  |\n| `...`            | ...      | undefined | All other props are applied to the root element. |\n\n\u003cbr/\u003e\n\n## License\nI'm very happy to receive suggestions and contributions from everyone \u003c3\n\nMIT © [dodinhthang](https://github.com/dodinhthang)(Thang Do)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodinhthang%2Freactjs-social-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdodinhthang%2Freactjs-social-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodinhthang%2Freactjs-social-kit/lists"}