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

akiokio / ReactSignupLoginComponent