{"id":38574815,"url":"https://github.com/thebeaverhead/react-modal-login","last_synced_at":"2026-01-17T08:08:20.330Z","repository":{"id":26915051,"uuid":"110839910","full_name":"thebeaverhead/react-modal-login","owner":"thebeaverhead","description":"Login modal component built with React. Besides a traditional sign in and sign up forms you may use our pre-configured social login buttons. In the current version we offer a support for Facebook and Google.","archived":false,"fork":false,"pushed_at":"2023-03-07T00:29:48.000Z","size":2958,"stargazers_count":53,"open_issues_count":11,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-11T07:45:01.468Z","etag":null,"topics":["modal","react","reactjs","social","social-login"],"latest_commit_sha":null,"homepage":"http://developers.thebeaverhead.com/react-modal-login","language":"JavaScript","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/thebeaverhead.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-11-15T13:55:04.000Z","updated_at":"2025-05-07T16:44:16.000Z","dependencies_parsed_at":"2024-06-18T19:52:14.043Z","dependency_job_id":"437911d2-ecb8-4a85-b8e1-683d736925c4","html_url":"https://github.com/thebeaverhead/react-modal-login","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/thebeaverhead/react-modal-login","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebeaverhead%2Freact-modal-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebeaverhead%2Freact-modal-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebeaverhead%2Freact-modal-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebeaverhead%2Freact-modal-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thebeaverhead","download_url":"https://codeload.github.com/thebeaverhead/react-modal-login/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebeaverhead%2Freact-modal-login/sbom","scorecard":{"id":877958,"data":{"date":"2025-08-11","repo":{"name":"github.com/thebeaverhead/react-modal-login","commit":"9869265cdebc55e37ba262489a0f4c49594f8f88"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.6,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: containerImage not pinned by hash: Dockerfile:1: pin your Docker image by updating ubuntu:18.04 to ubuntu:18.04@sha256:152dc042452c496007f07ca9127571cb9c29697f42acbfad72324b2bb2e43c98","Warn: downloadThenRun not pinned by hash: Dockerfile:12","Info:   0 out of   1 downloadThenRun dependencies pinned","Info:   0 out of   1 containerImage dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Vulnerabilities","score":0,"reason":"52 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T06:48:06.393Z","repository_id":26915051,"created_at":"2025-08-24T06:48:06.393Z","updated_at":"2025-08-24T06:48:06.393Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28504358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T06:57:29.758Z","status":"ssl_error","status_checked_at":"2026-01-17T06:56:03.931Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["modal","react","reactjs","social","social-login"],"created_at":"2026-01-17T08:08:20.265Z","updated_at":"2026-01-17T08:08:20.324Z","avatar_url":"https://github.com/thebeaverhead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-modal-login\n\nLogin modal component built with React. Besides a traditional sign in and sign up forms you may use\nour pre-configured social login buttons. In the current version we offer a support for Facebook and Google.\n\nSince we intend to target the module for developers, we decided to offer bigger customization options.\nThis requires some functions to be created in a parent component. Don't worry though. We will cover that topic further\nin this manual.\n\n![Demo](http://developers.thebeaverhead.com/images/demo.gif \"Example usage\")\n\n### Compatibility\n\n| React version | react-modal-login |\n|---------------|-------------------|\n| \\\u003e= 17.0      | \\\u003e= 2.0.6         |\n| \\\u003e= 16.0      | \u003c 2.0.6           |\n| \u003c 15.0        | 1.3.4             |\n\n### v2 breaking changes:\n- Styles are not embedded into bundle. If you wish to use default styles, import them:\n```js\nimport ReactModalLogin from \"react-modal-login\";\nimport \"react-modal-login/dist/react-modal-login.css\";\n\n```\n\n### Installation\n\n```bash\nnpm install --save react-modal-login\n```\n\n### Demos\n\nYou may find some samples of the plugin at [developers.thebeaverhead.com/react-modal-login](http://developers.thebeaverhead.com/react-modal-login)\n\n### Social support\n\nIf you're willing to use social login buttons, you need to configure them first.\nYou may either keep those settings in a separate file or no, it's up to you.\nFor the sake of keeping everything in order, we demonstrate how to use it in\n**social-config.js** file\n\n**Typical Facebook configuration**\nGo to [Facebook developers platform](https://developers.facebook.com) and create an app (or use existing one). Create a Website configuration.\n\n```js\nconst facebook = {\n  appId: \"YOUR FB APP ID GOES HERE\",\n  cookie: true,\n  xfbml: true,\n  version: \"v12.0\",\n  scope: \"email\",\n  return_scopes: false\n};\n\nexport const facebookConfig = facebook;\n```\n\n**Typical Google configuration**\nGo to [Google Developer Console](https://console.developers.google.com/) and create a project (or use existing one).\nCreate an OAuth 2.0 client ID.\n\n```js\nconst google = {\n  client_id: \"YOUR_CLIENT_ID.apps.googleusercontent.com\",\n  scope: \"profile email\"\n};\n\nexport const googleConfig = google;\n```\n\n### Managing state in parent component\n\nJust as I wrote at the upper part of this manual, our component is highly customizable. Thus, some of the methods\nneeded for basic functionality need to be passed down from the parent component. Just like in the example below.\nIf you would like to enjoy a full range of plugin's functionality you need to:\n\n- `declare initial state` - it is recommended to do this in a constructor function\n\n```js\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n      loading: false,\n      error: null\n    };\n\n  }\n```\n\nYou need to create methods to be passed to ReactModalLogin component such as:\n\n- `openModal()` - action to open the modal. For instance, you may bind this to click of the \"sign in\" button etc.\n- `closeModal()` - action to close the modal. You need to pass it to the component later on to enable hiding the modal\n  by clicking close button or clicking in overlay wrap\n- `startLoading()` - action needed to serve the loading event. When there is an asynchronous action in component you may\n  be willing to make other components inactive\n- `finishLoading()` - that action is indicating the end of loading and it's making all the components inside the component\n  active again\n- `afterTabsChange()` - callback to clicking tab button. As provided in our example, you may use it to clean the error state\n\nMost Likely you will be in the need of using social login callback actions. Those may execute some code in your app as well\nas display the fail error:\n\n- `onLoginSuccess()` - success login callback\n- `onLoginFail()` - \"login failed\" callback. It is recommended to execute setState() function here which changes the error\n  state\n\n### Example\n\n```js\nimport React from \"react\";\nimport ReactModalLogin from \"react-modal-login\";\n\nimport { facebookConfig, googleConfig } from \"social-config\";\n\nclass Sample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n      loading: false,\n      error: null\n    };\n  }\n\n  openModal() {\n    this.setState({\n      showModal: true\n    });\n  }\n\n  closeModal() {\n    this.setState({\n      showModal: false,\n      error: null\n    });\n  }\n\n  onLoginSuccess(method, response) {\n    console.log(\"logged successfully with \" + method);\n  }\n\n  onLoginFail(method, response) {\n    console.log(\"logging failed with \" + method);\n    this.setState({\n      error: response\n    });\n  }\n\n  startLoading() {\n    this.setState({\n      loading: true\n    });\n  }\n\n  finishLoading() {\n    this.setState({\n      loading: false\n    });\n  }\n\n  afterTabsChange() {\n    this.setState({\n      error: null\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e this.openModal()}\u003eOpen Modal\u003c/button\u003e\n\n        \u003cReactModalLogin\n          visible={this.state.showModal}\n          onCloseModal={this.closeModal.bind(this)}\n          loading={this.state.loading}\n          error={this.state.error}\n          tabs={{\n            afterChange: this.afterTabsChange.bind(this)\n          }}\n          loginError={{\n            label: \"Couldn't sign in, please try again.\"\n          }}\n          registerError={{\n            label: \"Couldn't sign up, please try again.\"\n          }}\n          startLoading={this.startLoading.bind(this)}\n          finishLoading={this.finishLoading.bind(this)}\n          providers={{\n            facebook: {\n              config: facebookConfig,\n              onLoginSuccess: this.onLoginSuccess.bind(this),\n              onLoginFail: this.onLoginFail.bind(this),\n              label: \"Continue with Facebook\"\n            },\n            google: {\n              config: googleConfig,\n              onLoginSuccess: this.onLoginSuccess.bind(this),\n              onLoginFail: this.onLoginFail.bind(this),\n              label: \"Continue with Google\"\n            }\n          }}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Component's properties\n\n- `mainWrapClass` |_string_| - custom class of the whole component's wrapper (which contains both overlay and the popup itself)\n\n- `mainWrapId` |_string_| - id of the whole component's wrapper\n\n- `initialTab` |_string_| - (default _\"login\"_) initial tab we'd like to mark as opened - _'login'_, _'register'_ or _'recoverPassword'_. Think of it as defaultValue in stateless inputs. It will be renamed to defaultValue in later releases.\n\n- `onAfterCloseModal` |_function_| - action executing just after the closing of modal\n\n- `onBeforeCloseModal` |_function_| - action executing just before the closing of modal\n\n- `onCloseModal` |_function_| - function closing the modal\n\n- `overlayClass` |_string_| - custom class of the popup wrap overlay\n\n- `visible` |_boolean_| - boolean which determines whether popup should be visible or no\n- `additionalWrap` |_object_| - that's the div which shows loader and error messages in case we don't include our custom form\n  - `containerClass` |_string_| - additionalWrap container custom class\n  - `disabled` |_boolean_| - boolean determining if the additionalWrap should be disabled\n- `closeBtn` |_object_| - close button object\n\n  - `containerClass` |_string_| - close button container custom class\n  - `element` |_component_| - custom close button we'd like to attach\n\n- `aboveSocialsLoginContainer` |_component_| - custom container above socials buttons visible on login tab\n\n- `aboveSocialsRegisterContainer` |_component_| - custom container above socials buttons visible on register tab\n\n- `aboveSocialsRecoverPasswordContainer` |_component_| - custom container above socials buttons visible on recover password tab\n\n- `form` |_object_| - object of custom login/register form you may include in popup\n\n  - `onLogin` |_function_| - function executing when user click 'sign in' button\n  - `onRegister` |_function_| - function executing when user click 'sign up' button\n  - `onRecoverPassword` |_function_| - function executing when user click 'recover password' button\n\n  - `loginContainerClass` |_string_| - custom class of login form container\n  - `registerContainerClass` |_string_| - custom class of register form container\n  - `recoverPasswordContainerClass` |_string_| - custom class of password recovery form container\n  - `bottomLoginContainer` |_component_| - custom container below login inputs group\n  - `bottomRegisterContainer` |_component_| - custom container below register inputs group\n  - `bottomRecoverPasswordContainer` |_component_| - custom container below password recovery inputs group\n\n  - `recoverPasswordSuccessLabel` - |_object_| - Text being displayed when we successfully recover password\n    _ `labelClass` |*string*| - custom class of the text\n    _ `label` |_string_ or _component_| - text of the text\n\n  - `recoverPasswordAnchor` - |_object_| - Forgotten password link visible on login tab\n    - `anchorClass` |_string_| - custom class of the link\n    - `label` |_string_ or _component_| - text of the link\n  - `loginBtn` - |_object_| - login button\n    - `buttonClass` |_string_| - custom class of login button\n    - `label` |_string_ or _component_| - text inside login button\n  - `registerBtn` - |_object_| - register button\n    - `buttonClass` |_string_| - custom class of register button\n    - `label` |_string_ or _component_| - text inside register button\n  - `recoverPasswordBtn` - |_object_| - recover password button\n    - `buttonClass` |_string_| - custom class of recover password button\n    - `label` |_string_ or _component_| - text inside recover password button\n  - `loginInputs` |_array_| - Array of objects. Every each of them represents single login input field\n    - `containerClass` |_string_| - custom class of input wrap\n    - `type` |_string_| - HTML type of input (email, password, text, number etc.)\n    - `inputClass` |_string_| - custom class of the input\n    - `id` |_string_| - input's id\n    - `name` |_string_| - input's name\n    - `placeholder` |_string_| - input's placeholder\n    - `label` |_string_ or _component_| - label of the input\n    - `defaultValue` |_string_| - a default value for the input. \n    - `component` |_object_| - Allows to render a given React component instead of input. \n  - `registerInputs` |_array_| - Array of objects. Every each of them represents single register input field\n    - `containerClass` |_string_| - custom class of input wrap\n    - `type` |_string_| - HTML type of input (email, password, text, number etc.)\n    - `inputClass` |_string_| - custom class of the input\n    - `id` |_string_| - input's id\n    - `name` |_string_| - input's name\n    - `placeholder` |_string_| - input's placeholder\n    - `label` |_string_ or _component_| - label of the input\n    - `defaultValue` |_string_| - a default value for the input.\n    - `component` |_object_| - Allows to render a given React component instead of input.\n  - `recoverPasswordInputs` |_array_| - Array of objects. Every each of them represents single recovery password form input field\n    - `containerClass` |_string_| - custom class of input wrap\n    - `type` |_string_| - HTML type of input (email, password, text, number etc.)\n    - `inputClass` |_string_| - custom class of the input\n    - `id` |_string_| - input's id\n    - `name` |_string_| - input's name\n    - `placeholder` |_string_| - input's placeholder\n    - `label` |_string_ or _component_| - label of the input\n    - `defaultValue` |_string*_*| - a default value for the input.\n    - `component` |_object_| - Allows to render a given React component instead of input.\n- `loader` |_object_| - loader svg object\n  - `containerClass` |_string_| - loader container custom class\n  - `disabled` |_boolean_| - boolean determining if the loader should be disabled\n- `providers` |_object_| - object containing social buttons providers data\n  - `facebook` - |_object_| - facebook button object\n    - `btnClass` |_string_| - button custom class\n    - `config` |_object_| - Facebook API config parameters used to init the modal\n      (for more info please see [Facebook API config docs](https://developers.facebook.com/docs/javascript/reference/FB.init/v2.11)\n      and [Facebook API scope docs](https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11))\n    - `btn` |_component_| - if you would like to insert custom button for facebook login include it here\n    - `onLoginSuccess` |_function(method, response)_| - login success callback. It returns _method_ which will be 'facebook'\n      and login success response\n    - `onLoginFail` |_function(method, response)_| - login fail callback. It returns _method_ which will be 'facebook'\n      and login fail response\n    - `label` |_string_ or _component_| - text inside FB button\n  - `google` - |_object_| - google button object\n    - `btnClass` |_string_| - button custom class\n    - `config` |_object_| - Google API config parameters used to init the modal\n      (for more info please visit [Google developers page](https://developers.google.com/identity/sign-in/web/reference#gapiauth2clientconfig))\n    - `btn` |_component_| - if you would like to insert custom button for google login include it here\n    - `onLoginSuccess` |_function(method, response)_| - login success callback. It returns _method_ which will be 'google'\n      and login success response\n    - `onLoginFail` |_function(method, response)_| - login fail callback. It returns _method_ which will be 'google'\n      and login fail response\n    - `label` |_string_ or _component_| - text inside Google button\n- `loginError` |_object_| - login error message object\n\n  - `containerClass` |_string_| - login error container custom class\n  - `label` |_string_ or _component_| - text of failed login message\n\n- `registerError` |_object_| - register error message object\n  - `containerClass` |_string_| - register error container custom class\n  - `label` |_string_ or _component_| - text of failed register message\n- `recoverPasswordError` |_object_| - recover password error message object\n  - `containerClass` |_string_| - recover password error container custom class\n  - `label` |_string_ or _component_| - text of failed recover password message\n- `separator` |_object_| - object of separator which sits between social login buttons and custom form\n  - `containerClass` |_string_| - separator custom class\n  - `label` |_string_ or _component_| - text of separator\n- `tabs` |_object_| - sign in / sign up tabs object\n  - `containerClass` |_string_| - tabs container custom class\n  - `afterChange` |_function_| - callback which fires after the change of a tab, returns name of the new tab.\n  - `loginLabel` |_string_| - text of login label\n  - `registerLabel` |_string_| - text of register label\n  - `onLoginClickBeforeTransition` |_function_| - a callback triggered before login tab become active.\n  - `onLoginClickAfterTransition` |_function_| - a callback triggered after login tab become active.\n  - `onRegisterClickBeforeTransition` |_function_| - a callback triggered before register tab become active.\n  - `onRegisterClickAfterTransition` |_function_| - a callback triggered after register tab become active.\n  - `onRecoverPasswordClickBeforeTransition` |_function_| - a callback triggered before recoverPassword tab become active.\n  - `onRecoverPasswordClickAfterTransition` |_function_| - a callback triggered after recoverPassword tab become active.\n\n### Common problems\n\n1. `Uncaught ReferenceError: FB is not defined` or `Cannot read property 'auth2' of undefined`.\n   This is because this component initializes the Facebook and Google on componentDidUpdate checking whether\n   the `visible` prop has changed. If you set `visible={true}` then the component will not initialize.\n   This happens to prevent initialization of FB and Google login code on page load. To solve this,\n   you can eg. `visible={this.state.visible}` and set `visible` state on `componentDidMount`.\n\n### Notes\n\n**Social buttons API**\n\nBoth Facebook and Google instances are initialized the first time you open popup modal. We decided to take such an attitude\nto save some of the precious loading time when the user enters the website.\n\nAfter the initialization is complete you have an access to:\n\n- **Facebook instance** - `window.FB`\n- **Google instance** - `window.gapi`\n\n### Development\n\n**Playing with demos**\n\nIf you would like to run demos locally:\n\n```bash\ngit clone https://github.com/thebeaverhead/react-modal-login\nnpm install\nnpm start\n```\n\nUpdate `demo/es/social_config.js` file with your credentials. If you won't change them, they should work\nfor your local address `localhost:8080`.\n\nOpen _http://localhost:8080_.\n\nif you're using docker you need to pass -p 8080:8080 parameter to your `docker run` command.\n\nAll the source files of the component are in the _/src_ path.\n\nDemo pages are located in _/demo_ folder. When you type `npm start` webpack-dev-server starts watching _/demo/es/index.js_\nand then compiles all the dependencies you require inside it (may be _.js, _.less or \\*.css) to _/demo/bundle.js_ which is\nthen included in _/demo/index.html_ and served in _http://localhost:8080_.\n\nYou may change the port from 8080 to something different in _webpack.dev.config.js_ file.\n\nThere is a hot reloader so you don't really need to reload the page manually since all the changes _.js and _.less files\ncause it to happen automatically.\n\n**Testings**\n\nTo run tests simply type:\n\n```bash\nnpm test\n```\n\n**Production build**\n\nTo build a production package you need to type:\n\n```bash\ngit clone https://github.com/thebeaverhead/react-modal-login\nnpm install\nnpm run build-prod\n```\n\nThen all the required _.less and _.js files from _/src_ path are compiled into _/dist_ folder.\n\nBy default styles are bundled into _/dist/react-modal-login.js_ but you may change that behaviour in a\n_webpack.prod.config.js_ config file and use _/dist/react-modal-login.min.css_ instead.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebeaverhead%2Freact-modal-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebeaverhead%2Freact-modal-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebeaverhead%2Freact-modal-login/lists"}