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


``bash`
$ npm install @react-login-page/page3 --save
`jsx mdx:preview
import React from 'react';
import Login from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
const Demo = () => (
}} />
xx
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import LoginPage, { Email, Password, Welcome, Banner, Submit, Title, Logo, Reset } from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
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/page3';
import LoginLogo from 'react-login-page/logo-rect';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
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/page3';
import LoginLogo from 'react-login-page/logo-rect';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
const Demo = () => (
xx
}} />
Forgot Username / Password?
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import Login, { Banner } from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
const css = {
'--login-bg': '#f3f2f2',
'--login-color': '#333',
'--login-logo': '#fff',
'--login-inner-bg': '#fff',
'--login-banner-bg': '#fbfbfb',
'--login-input': '#333',
'--login-input-icon': '#dddddd',
'--login-input-bg': 'transparent',
'--login-input-border': 'rgba(0, 0, 0, 0.13)',
'--login-input-placeholder': '#999999',
'--login-btn': '#fff',
'--login-btn-bg': '#b08bf8',
'--login-btn-bg-focus': '#b08bf8',
'--login-btn-bg-hover': '#b08bf8',
'--login-btn-bg-active': '#b08bf8',
};
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-page3,
.login-page3 {
--login-bg: #f3f2f2;
--login-color: #333;
--login-logo: #fff;
--login-inner-bg: #fff;
--login-banner-bg: #fbfbfb;
--login-valid: #e15549;
--login-input: #333;
--login-input-icon: #dddddd;
--login-input-bg: transparent;
--login-input-border: rgba(0, 0, 0, 0.13);
--login-input-placeholder: #999999;
--login-btn: #fff;
--login-btn-bg: #b08bf8;
--login-btn-bg-focus: #b08bf8;
--login-btn-bg-hover: #b08bf8;
--login-btn-bg-active: #b08bf8;
}
[data-color-mode*='light'] .login-page3 {
--login-bg: #f3f2f2;
--login-color: #333;
--login-logo: #fff;
--login-inner-bg: #fff;
--login-banner-bg: #fbfbfb;
--login-valid: #e15549;
--login-input: #333;
--login-input-icon: #dddddd;
--login-input-bg: transparent;
--login-input-border: rgba(0, 0, 0, 0.13);
--login-input-placeholder: #999999;
--login-btn: #fff;
--login-btn-bg: #b08bf8;
--login-btn-bg-focus: #b08bf8;
--login-btn-bg-hover: #b08bf8;
--login-btn-bg-active: #b08bf8;
}
Components be provided to modify control properties and perform other related functions.
`jsx
import Login from '@react-login-page/page3';
// buttons
import { Reset, Submit } from '@react-login-page/page3';
// blocks
import { Logo, Title, Welcome, ButtonAfter } from '@react-login-page/page3';
// fields
import { Email, Password } from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
// Basic Components
import { Button } from '@react-login-page/page3';
// or
import { Button } from 'react-login-page';
// Define the order of Password controls
// Hiding the Password control
// Add new input control
xx
// Add content after the button
Forgot Username / Password?
// Modify logo image
`
Use dot notation components.
`jsx
import Login from '@react-login-page/page3';
// 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.