{"id":25937728,"url":"https://github.com/michaeljscript/react-social-login-buttons","last_synced_at":"2025-04-08T08:10:50.293Z","repository":{"id":23434487,"uuid":"98933802","full_name":"michaeljscript/react-social-login-buttons","owner":"michaeljscript","description":"Social login buttons for React","archived":false,"fork":false,"pushed_at":"2025-03-31T17:33:44.000Z","size":3722,"stargazers_count":214,"open_issues_count":5,"forks_count":42,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-04-01T07:40:12.433Z","etag":null,"topics":["authentication","buttons","react","social"],"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/michaeljscript.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-31T22:04:05.000Z","updated_at":"2025-02-27T08:23:26.000Z","dependencies_parsed_at":"2024-01-28T18:20:59.025Z","dependency_job_id":"0fde0b7a-a7fc-4957-92c7-63147ae3cf4d","html_url":"https://github.com/michaeljscript/react-social-login-buttons","commit_stats":{"total_commits":264,"total_committers":19,"mean_commits":"13.894736842105264","dds":0.08712121212121215,"last_synced_commit":"6c1b4060ede4a3252a1cd10a499dbfdf30e86602"},"previous_names":["michaeljscript/react-social-login-buttons","michalszorad/react-social-login-buttons"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljscript%2Freact-social-login-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljscript%2Freact-social-login-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljscript%2Freact-social-login-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeljscript%2Freact-social-login-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaeljscript","download_url":"https://codeload.github.com/michaeljscript/react-social-login-buttons/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801155,"owners_count":20998338,"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":["authentication","buttons","react","social"],"created_at":"2025-03-04T03:25:56.107Z","updated_at":"2025-04-08T08:10:50.233Z","avatar_url":"https://github.com/michaeljscript.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Social Login Buttons\n\nLive demo https://codesandbox.io/s/3rpq558rv5\n\nA simple package to display social login buttons using React.\n\nButtons do not provide any social logic.\nThey are only visual components listening to some events triggered by the user.\n\n![Social login buttons](https://raw.githubusercontent.com/michaeljscript/react-social-login-buttons/develop/examples/simple/screenshot7.png)\n\n## Install\n\nnpm\n\n```\nnpm install --save react-social-login-buttons\n```\n\nyarn\n\n```\nyarn add react-social-login-buttons\n```\n\n## Importing\n\nES6 imports:\n\n```js\nimport { FacebookLoginButton } from \"react-social-login-buttons\";\n```\n\nES6 imports optimized (deprecated):\n\n```js\nimport FacebookLoginButton from \"react-social-login-buttons/lib/buttons/FacebookLoginButton\";\n```\n\n## Usage\n\nDefault button content - \"Log in with Facebook\"\n\n```jsx\n\u003cFacebookLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\nCustom button content\n\n```jsx\n\u003cFacebookLoginButton onClick={() =\u003e alert(\"Hello\")}\u003e\n  \u003cspan\u003eCustom text\u003c/span\u003e\n\u003c/FacebookLoginButton\u003e\n```\n\n## Social Button Types\n\nWe currently support just a few login buttons. Others will be implemented later.\n\n#### FacebookLoginButton\n\n```jsx\n\u003cFacebookLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### GoogleLoginButton\n\n```jsx\n\u003cGoogleLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### GithubLoginButton\n\n```jsx\n\u003cGithubLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### TwitterLoginButton\n\n```jsx\n\u003cTwitterLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### XLoginButton\n\n```jsx\n\u003cXLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### AmazonLoginButton\n\n```jsx\n\u003cAmazonLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### InstagramLoginButton\n\n```jsx\n\u003cInstagramLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### LinkedInLoginButton\n\n```jsx\n\u003cLinkedInLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### MicrosoftLoginButton\n\n```jsx\n\u003cMicrosoftLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### BufferLoginButton\n\n```jsx\n\u003cBufferLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### TelegramLoginButton\n\n```jsx\n\u003cTelegramLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### AppleLoginButton\n\n```jsx\n\u003cAppleLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n#### DiscordLoginButton\n\n```jsx\n\u003cDiscordLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n## SlackLoginButton\n\n```jsx\n\u003cSlackLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### OktaLoginButton\n\n```jsx\n\u003cOktaLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### YahooLoginButton\n\n```jsx\n\u003cYahooLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### ZaloLoginButton\n\n```jsx\n\u003cZaloLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### TikTokLoginButton\n\n```jsx\n\u003cTikTokLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### MetamaskLoginButton\n\n```jsx\n\u003cMetamaskLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n### GitlabLoginButton\n\n```jsx\n\u003cGitlabLoginButton onClick={() =\u003e alert(\"Hello\")} /\u003e\n```\n\n## Create your own button\n\nYou can create your own button.\n\nYou do not have to wait for us to implement all of them.\n\nYou can also use your own icons, let's say from font-awesome.\n\nYou can also pass a component to the icon prop.\n\n```js\nimport React from \"react\";\nimport { createButton } from \"react-social-login-buttons\";\n\nconst config = {\n  text: \"Log in with Facebook\",\n  icon: \"facebook\",\n  iconFormat: (name) =\u003e `fa fa-${name}`,\n  style: { background: \"#3b5998\" },\n  activeStyle: { background: \"#293e69\" },\n};\n/** My Facebook login button. */\nconst MyFacebookLoginButton = createButton(config);\n\nexport default MyFacebookLoginButton;\n```\n\nConfig can also look like.\n\n```js\n\nconst config = {\n  text: \"Log in with Facebook\",\n  icon: MyIconComponent,\n  style: { background: \"#3b5998\" },\n  activeStyle: { background: \"#293e69\" },\n};\n```\n\n## Props\n\nProps for every Button\n\n### `onClick` {function} (optional)\n\nWill be triggered when clicked on the button.\n\n### `style` {Object} (optional)\n\nCustom button styles\n\n### `className` {String} (optional)\n\nCustom button class\n\n### `children` {React.children} (optional)\n\nYou can pass any children to our buttons.\n\n### `activeStyle` {Object} (optional)\n\nactiveStyle styles will be applied instead of style when mouse hovers above the element\n\n### `icon` {String|Node} (optional)\n\nThis icon will be displayed.\n\nIf you pass a string, `\u003ci className={format(name)}/\u003e` will be rendered.\n\n### `iconSize` {String} (optional)\n\nIcon will have this size. Eg. \"26px\"\n\n### `iconColor` {String} (optional)\n\nIcon will have this color - default #FFFFFF\n\n### `size` {String} (optional)\n\nBox will have this size. Eg. \"150px\"\n\n### `iconFormat` {function} (optional)\n\nFormat icon className. Eg. `(name) =\u003e \"fa-icon fa-icon-\" + name`\n\n### `align` {\"left\" | \"right\" | \"center\"} (optional)\n\nAlign the text on the button (default is left).\n\n### `preventActiveStyles` {Boolean} (optional) default: false\n\nIf set to true, activeStyles won't be used and will be used styles from the style prop.\n\n### `disabled` {Boolean} (optional)\n\nDisables (or enables the button)\n\n### Events\n\n- `onClick`\n- `onMouseEnter`\n- `onMouseLeave`\n\n## Why react-social-login-buttons ?\n\nreact-social-login-buttons is focused on speed and simplicity.\n\n## Contribution\n\nI welcome issues and pull requests on https://github.com/michaeljscript/react-social-login-buttons\n\n## Thanks\n\nSpecial thanks to people creating awesome svg icons and teams\n\n- [Dinirio](https://www.dinirio.com)\n\n- [SimpleIcon](https://www.flaticon.com/authors/simpleicon)\n\n- [Simple Icons](https://github.com/simple-icons/simple-icons)\n\n- [iconmonstr](https://iconmonstr.com/amazon-1-svg/)\n\n- [freepik](https://www.flaticon.com/free-icon/instagram-logo_87390)\n\n- [Icomoon](https://www.flaticon.com/authors/icomoon)\n\n- [icons8](https://icons8.com/icon/set/google/all)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeljscript%2Freact-social-login-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaeljscript%2Freact-social-login-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeljscript%2Freact-social-login-buttons/lists"}