Some `react` login pages, which can be used quickly after installation.
npm install @react-login-page/page2


``bash`
$ npm install @react-login-page/page2 --save
`jsx mdx:preview
import React from 'react';
import Login from '@react-login-page/page2';
import defaultBannerImage from '@react-login-page/page2/banner-image';
const Demo = () => (
xx
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import LoginPage, { Email, Password, Submit, Title, Logo, Reset } from '@react-login-page/page2';
import defaultBannerImage from '@react-login-page/page2/banner-image';
import LoginLogo from 'react-login-page/logo';
const styles = { height: 580 };
const Demo = () => (
export default Demo;
`
Use visible={false} to hide controls.
`jsx mdx:preview
import React from 'react';
import LoginPage, { Reset, Title, Logo, Banner, Password } from '@react-login-page/page2';
import LoginLogo from 'react-login-page/logo-rect';
import defaultBannerImage from '@react-login-page/page2/banner-image';
const Demo = () => (
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import LoginPage, { Reset, Logo, Email, Banner, ButtonAfter, Password, Input } from '@react-login-page/page2';
import LoginLogo from 'react-login-page/logo-rect';
import defaultBannerImage from '@react-login-page/page2/banner-image';
const Demo = () => (
xx
Forgot Username / Password?
);
export default Demo;
`
`jsx
import React from 'react';
import Login from '@react-login-page/page2';
const css = {
'--login-bg': 'linear-gradient(-135deg,#c850c0,#4158d0)',
'--login-color': '#333',
'--login-inner-bg': '#fff',
'--login-input': '#57b846',
'--login-input-bg': '#e6e6e6',
'--login-input-placeholder': '#999999',
'--login-btn': '#fff',
'--login-btn-bg': '#57b846',
'--login-btn-bg-focus': '#57b846',
'--login-btn-bg-hover': '#333',
'--login-btn-bg-active': '#57b846',
};
const Demo = () =>
export default Demo;
`
Use css variables to override default color values
`css`
.login-page2 {
--login-bg: linear-gradient(-135deg, #c850c0, #4158d0);
--login-color: #333;
--login-inner-bg: #fff;
--login-input: #57b846;
--login-input-bg: #e6e6e6;
--login-input-placeholder: #999999;
--login-btn: #fff;
--login-btn-bg: #57b846;
--login-btn-bg-focus: #57b846;
--login-btn-bg-hover: #333;
--login-btn-bg-active: #57b846;
}
Custom CSS style overrides
`css`
.login-page2 section button:focus {
box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26);
}
.login-page2 section button:hover {
background-color: #0070bd;
}
.login-page2 section button:active {
background-color: #00528a;
}
`css`
[data-color-mode*='dark'] .login-page2,
.login-page2 {
--login-bg: linear-gradient(-135deg, #c850c0, #4158d0);
--login-color: #333;
--login-inner-bg: #fff;
--login-input: #666;
--login-input-bg: #e6e6e6;
--login-input-placeholder: #999999;
--login-btn: #fff;
--login-btn-bg: #57b846;
--login-btn-bg-focus: #57b846;
--login-btn-bg-hover: #333;
--login-btn-bg-active: #57b846;
}
[data-color-mode*='light'] .login-page2 {
--login-bg: linear-gradient(-135deg, #c850c0, #4158d0);
--login-color: #333;
--login-inner-bg: #fff;
--login-input: #57b846;
--login-input-bg: #e6e6e6;
--login-input-placeholder: #999999;
--login-btn: #fff;
--login-btn-bg: #57b846;
--login-btn-bg-focus: #57b846;
--login-btn-bg-hover: #333;
--login-btn-bg-active: #57b846;
}
Components be provided to modify control properties and perform other related functions.
`jsx
import LoginPage from '@react-login-page/page2';
// buttons
import { Reset, Submit } from '@react-login-page/page2';
// blocks
import { Logo, Title, ButtonAfter } from '@react-login-page/page2';
// fields
import { Email, Password } from '@react-login-page/page2';
import defaultBannerImage from '@react-login-page/page2/banner-image';
// Basic Components
import { Button, Input } from '@react-login-page/page2';
// or
import { Button, Input } from 'react-login-page';
// Define the order of Password controls
// Hiding the Password control
// Add input control
// Add content after the button
Forgot Username / Password?
// Modify logo image
`
Use dot notation components.
`jsx
import Login from '@react-login-page/page2';
// Define the order of Password controls
// Hiding the Password control
// Add content after the button
Forgot Username / Password?
// Modify logo image
``
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.