A lightweight, customizable react component log-in modal including social media buttons.
No functionality is applied. Functions for click events can be passed via props.
As can varies options for text and behavior.
Custom labels that can be passed via props (optional)
Prop name
Description
labels
Optional labels. Must be passed as an entire object
Default
{loginTitle: "Log in",signupTitle: "Create new user",forgotTitle: "Reset password",loginFacebookButton: "Log in with Facebook",loginGoogleButton: "Log in with Google",loginEmailButton: "Log in with email",signupFacebookButton: "Sign up with Facebook",signupGoogleButton: "Sign up with Google",signupEmailButton: "Sign up with email",forgotButton: "Send new password",loginEmailPlaceholder: "Type email",loginPasswordPlaceholder: "Type password",signupUsernamePlaceholder: "Type username",signupLink: "Create new user?",loginLink: "Already a user?",forgotLink: "Forgot password?",orLabel: "or"}
π Example
importReact,{Component}from"react";importLoginModalfrom"react-login-modal-sm";exportdefaultclassAppextendsComponent{state={showModal: false};toggleModal=()=>{this.setState({showModal: !this.state.showModal});};handleLoginWithFacebook=()=>{// Do something when 'Login with Facebook' is clickedconsole.log("Login with Facebook...");};handleSignupByEmail=(email,username,password)=>{// Do something when 'Signup by email' is clickedconsole.log("Sign up by email...");};render(){constcustomUsernameRegex=/^[a-zA-Z0-9_]{5,}/;return(<divclassName="App"><h1>react-login-modal-sm example</h1><LoginModalshowModal={this.state.showModal}toggleModal={this.toggleModal}onLoginFacebook={this.handleLoginWithFacebook}onSignupEmail={this.handleSignupByEmail}usernameRegex={customUsernameRegex}/><buttonclassName="test-btn btn btn-primary btn-lg"onClick={this.toggleModal}>
Log in
</button></div>);}}