{"id":15379054,"url":"https://github.com/simonhoiberg/react-login-modal-sm","last_synced_at":"2025-04-15T17:30:53.660Z","repository":{"id":57334152,"uuid":"137072014","full_name":"SimonHoiberg/react-login-modal-sm","owner":"SimonHoiberg","description":"Customizable React Social Media login modal","archived":false,"fork":false,"pushed_at":"2023-01-26T02:43:09.000Z","size":2109,"stargazers_count":33,"open_issues_count":15,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T22:42:58.574Z","etag":null,"topics":["facebook","google","modal","react","reactjs","reactjs-components","social-media"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonHoiberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-12T12:58:53.000Z","updated_at":"2023-10-05T16:45:18.000Z","dependencies_parsed_at":"2023-02-04T19:03:48.280Z","dependency_job_id":null,"html_url":"https://github.com/SimonHoiberg/react-login-modal-sm","commit_stats":null,"previous_names":["silind/react-login-modal-sm"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonHoiberg%2Freact-login-modal-sm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonHoiberg%2Freact-login-modal-sm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonHoiberg%2Freact-login-modal-sm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonHoiberg%2Freact-login-modal-sm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonHoiberg","download_url":"https://codeload.github.com/SimonHoiberg/react-login-modal-sm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249118495,"owners_count":21215571,"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","google","modal","react","reactjs","reactjs-components","social-media"],"created_at":"2024-10-01T14:18:09.515Z","updated_at":"2025-04-15T17:30:53.640Z","avatar_url":"https://github.com/SimonHoiberg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e Customizable React Social Media login modal\n\nA lightweight, customizable react component log-in modal including social media buttons.\nNo functionality is applied. Functions for click events can be passed via props.\nAs can varies options for text and behavior.\n\n## :mag_right: Preview\n![image](https://raw.githubusercontent.com/Silind/react-login-modal-sm/master/preview.png)\n\n### Live example\nhttps://silind.github.io/react-login-modal-sm/\n\n## :cloud: Installation\n\n### Install\n```sh\nnpm i react-login-modal-sm\n```\n\n### Run example\n```sh\n# Start development server using create-react-app\nnpm run example\n```\n\n### Bootstrap and Google Icons\n#### Put following tags in your public index.html file's header section\n\n```html\n\u003c!-- Google Icons --\u003e\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB\" crossorigin=\"anonymous\"\u003e\n```\n\n### Import and use component\n```jsx\nimport LoginModal from \"react-login-modal-sm\";\n\n\u003cLoginModal showModal={true} /\u003e\n```\n\n## :memo: Documentation\n\n### Constant that is passed via props\n| Prop name | Description |\n|-----------|-------------|\n| `showModal` | Boolean that determines whether the modal is visible or hidden |\n\n### Functions that is passed via props\n| Prop name | Description |\n|-----------|-------------|\n| `toggleModal` | Show / hide the modal. When user clicks the 'x' button or clicks the overlay-background |\n| `onLoginFacebook` | When user clicks on 'log in with Facebook' button |\n| `onLoginGoogle` | When user clicks on 'log in with Google' button |\n| `onLoginEmail` | When user clicks on 'log in with email' button. Passes (email, password) as parameters |\n| `onSignupFacebook` | When user clicks on 'sign up with Facebook' button |\n| `onSignupGoogle` | When user clicks on 'sign up with Google' button |\n| `onSignupEmail` | When user clicks on 'sign up with email' button. Passes (email, username, password) as parameters |\n| `onForgotPassword` | When user clicks on 'send new password' button. Passes (email) as parameter |\n\n### Regular expressions that can be passed via props (optional)\n| Prop name | Description | Default value |\n|-----------|-------------|---------------|\n| `emailRegex` | Regex that defines correct email format | https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript |\n| `usernameRegex` | Regex that defines correct username format | `/^[a-zA-Z0-9_-]{5,}/` |\n| `passwordRegex` | Regex that defines correct password format | `/^[a-zA-Z0-9_@!#()]{8,}/` |\n\n### Custom labels that can be passed via props (optional)\n| Prop name | Description |\n|-----------|-------------|\n| `labels` | Optional labels. Must be passed as an entire object |\n#### Default\n```js\n{\n  loginTitle: \"Log in\",\n  signupTitle: \"Create new user\",\n  forgotTitle: \"Reset password\",\n  loginFacebookButton: \"Log in with Facebook\",\n  loginGoogleButton: \"Log in with Google\",\n  loginEmailButton: \"Log in with email\",\n  signupFacebookButton: \"Sign up with Facebook\",\n  signupGoogleButton: \"Sign up with Google\",\n  signupEmailButton: \"Sign up with email\",\n  forgotButton: \"Send new password\",\n  loginEmailPlaceholder: \"Type email\",\n  loginPasswordPlaceholder: \"Type password\",\n  signupUsernamePlaceholder: \"Type username\",\n  signupLink: \"Create new user?\",\n  loginLink: \"Already a user?\",\n  forgotLink: \"Forgot password?\",\n  orLabel: \"or\"\n}\n``` \n\n## :clipboard: Example\n\n```jsx\nimport React, { Component } from \"react\";\nimport LoginModal from \"react-login-modal-sm\";\n\nexport default class App extends Component {\n  state = {\n    showModal: false\n  };\n\n  toggleModal = () =\u003e {\n    this.setState({ showModal: !this.state.showModal });\n  };\n\n  handleLoginWithFacebook = () =\u003e {\n    // Do something when 'Login with Facebook' is clicked\n    console.log(\"Login with Facebook...\");\n  };\n\n  handleSignupByEmail = (email, username, password) =\u003e {\n    // Do something when 'Signup by email' is clicked\n    console.log(\"Sign up by email...\");\n  };\n\n  render() {\n    const customUsernameRegex = /^[a-zA-Z0-9_]{5,}/;\n\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003ereact-login-modal-sm example\u003c/h1\u003e\n\n        \u003cLoginModal\n          showModal={this.state.showModal}\n          toggleModal={this.toggleModal}\n          onLoginFacebook={this.handleLoginWithFacebook}\n          onSignupEmail={this.handleSignupByEmail}\n          usernameRegex={customUsernameRegex}\n        /\u003e\n\n        \u003cbutton\n          className=\"test-btn btn btn-primary btn-lg\"\n          onClick={this.toggleModal}\n        \u003e\n          Log in\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## :question: Get Help\n1. Contact me on contact@silind.com\n2. \\- or if appropriate; raise an issue on Github","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonhoiberg%2Freact-login-modal-sm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonhoiberg%2Freact-login-modal-sm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonhoiberg%2Freact-login-modal-sm/lists"}