ReactSignupLoginComponent
Check out the examples to learn how to use it.
Features
- Updated to React 16
🎉 - Login
- Signup
- Recover Password
- Callbacks for every action
- 100% test coverage
- Drop-in component
- Custom labels for any text nice for customization or internationalization
How to use it
Installing
Using npm:
$ npm install react-signup-login-component
Using yarn:
$ yarn add react-signup-login-component
Getting started
import ReactSignupLoginComponent from 'react-signup-login-component';
const LoginPage = (props) => {
const signupWasClickedCallback = (data) => {
console.log(data);
alert('Signup callback, see log on the console to see the data.');
};
const loginWasClickedCallback = (data) => {
console.log(data);
alert('Login callback, see log on the console to see the data.');
};
const recoverPasswordWasClickedCallback = (data) => {
console.log(data);
alert('Recover password callback, see log on the console to see the data.');
};
return (
<div>
<ReactSignupLoginComponent
title="My awesome company"
handleSignup={signupWasClickedCallback}
handleLogin={loginWasClickedCallback}
handleRecoverPassword={recoverPasswordWasClickedCallback}
/>
</div>
);
};
export default LoginPage;
Configuration (Props) options
Required props
handleSignup(object)
Called when the users clicks on the signup button and the form is valid return: An object with the attributes: username, password and passwordConfirmation example:
{
username: 'johndoe',
password: '1234%##D',
passwordConfirmation: '1234%##D'
};
handleLogin(object)
Called when the users clicks on the login button and the form is valid return: An object with the attributes: username and password example:
{
username: 'johndoe',
password: '1234%##D'
};
handleRecoverPassword(object)
Called when the users clicks on the recover password button and the form is valid return: An object with the attributes: username example:
{
username: 'johndoe'
};
Optional props
title
Sets the h1 title on the login box example:
<Wrapper
title="My awesome company"
{...requiredProps} // Spread the default props. It's here to illustrate the example
/>
styles
You can overhide the component style passing an object to the styles prop. Here's an example with all the possible keys. The values can be any valid css property. example:
<ReactSignupLoginComponent
styles={{
mainWrapper: { backgroundColor: 'blue' },
mainTitle: { color: 'red' },
flipper: { transition: '0.1s' },
signup: {
wrapper: { backgroundColor: 'yellow' },
inputWrapper: { backgroundColor: 'AliceBlue' },
buttonsWrapper: { backgroundColor: 'Aqua' },
input: { backgroundColor: 'LavenderBlush' },
recoverPassword: {},
button: { backgroundColor: 'LightCoral' },
},
login: {
wrapper: { backgroundColor: 'yellow' },
inputWrapper: { backgroundColor: 'AliceBlue' },
buttonsWrapper: { backgroundColor: 'Aqua' },
input: { backgroundColor: 'LavenderBlush' },
recoverPasswordWrapper: { backgroundColor: 'MediumBlue' },
recoverPasswordButton: { backgroundColor: 'OldLace ' },
button: { backgroundColor: 'LightCoral' },
},
recoverPassword: {
wrapper: { backgroundColor: 'yellow' },
inputWrapper: { backgroundColor: 'AliceBlue' },
buttonsWrapper: { backgroundColor: 'Aqua' },
input: { backgroundColor: 'LavenderBlush' },
button: { backgroundColor: 'LightCoral' },
},
}}
{...requiredProps} // Spread the default props. It's here to illustrate the example
/>
Custom labels
Here's the list of possible custom labels you can use (check the storybook for usage):
usernameCustomLabel="Anything you want"
passwordCustomLabel="Anything you want"
passwordConfirmationCustomLabel="Anything you want"
recoverPasswordCustomLabel="Anything you want"
signupCustomLabel="Anything you want"
submitLoginCustomLabel="Anything you want"
goToLoginCustomLabel="Anything you want"
submitSignupCustomLabel="Anything you want"
goToSignupCustomLabel="Anything you want"
submitRecoverPasswordCustomLabel="Anything you want"
Tests
We have a 100% percent test coverage, to run the tests locally:
$ git clone https://github.com/akiokio/ReactSignupLoginComponent
$ cd ReactSignupLoginComponent
$ yarn install
$ yarn test
or to get the coverage report
$ yarn coverage
Issues
If you found something wrong with the component please open an issue here: https://github.com/akiokio/ReactSignupLoginComponent/issues/new
Notes
This readme is a working in progress, feel free to help update it making a pull request
License
Licensed under the MIT License: https://opensource.org/licenses/MIT