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


``bash`
$ npm install @react-login-page/page1 --save
`jsx mdx:preview
import React from 'react';
import Login from '@react-login-page/page1';
const Demo = () =>
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import LoginPage, { Username, Password, Submit, Title, Logo, Reset } from '@react-login-page/page1';
import LoginLogo from 'react-login-page/logo';
const styles = { height: 620 };
const Demo = () => (
export default Demo;
`
Use visible={false} to hide controls.
`jsx mdx:preview
import React from 'react';
import LoginPage, { Reset, Logo, Password } from '@react-login-page/page1';
import LoginLogo from 'react-login-page/logo-rect';
const Demo = () => (
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import LoginPage, { Reset, Logo, Username, Password, Input } from '@react-login-page/page1';
import LoginLogo from 'react-login-page/logo-rect';
const Demo = () => (
);
export default Demo;
`
`jsx mdx:preview
import React from 'react';
import Login from '@react-login-page/page1';
const css = {
'--login-bg': '#edeff3',
'--login-bg-from': '#46acfc',
'--login-bg-to': '#3ffbd8',
};
const Demo = () =>
export default Demo;
`
Use css variables to override default color values
`css`
.login-page-1 {
--login-bg': #edeff3;
--login-bg-from': #46acfc;
--login-bg-to': #3ffbd8;
}
Custom CSS style overrides
`css`
.login-page-1 section button:focus {
box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26);
}
.login-page-1 section button:hover {
background-color: #0070bd;
}
.login-page-1 section button:active {
background-color: #00528a;
}
`css`
[data-color-mode*='dark'] .login-page-1,
.login-page-1 {
--login-bg: #2c3338;
--login-color: #fff;
--login-bg-from: #fc466b;
--login-bg-to: #3f5efb;
}
[data-color-mode*='light'] .login-page-1 {
--login-bg: #edeff3;
--login-color: #3b4148;
--login-bg-from: #fc466b;
--login-bg-to: #3f5efb;
}
Components be provided to modify control properties and perform other related functions.
`jsx
import LoginPage from '@react-login-page/page1';
// buttons
import { Reset, Submit } from '@react-login-page/page1';
// blocks
import { Logo, Title } from '@react-login-page/page1';
// fields
import { Username, Password } from '@react-login-page/page1';
// Basic Components
import { Button, Input } from '@react-login-page/page1';
// or
import { Button, Input } from 'react-login-page';
// Define the order of Password controls
// Hiding the Password control
// Add input control
// Modify logo image
`
Use dot notation components.
`jsx
import Login from '@react-login-page/page1';
// Define the order of Password controls
// Hiding the Password control
// Modify logo image
``
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.