react-login-page
v1.0.6TypeScript
Some `react` login pages, which can be used quickly after installation.
0/weekUpdated 5 months agoMITUnpacked: 129.9 KB
Published by kenny wong
npm install react-login-page
React Login Pages
Getting Started
Encapsulated login page components based on react-login-page basic components are provided for quick installation and use. These components help streamline the process of creating login pages and offer flexible APIs for modifying and packaging these components. Welcome to choose from our encapsulated login pages. We also welcome recommendations for more cool login pages, which we will turn into React components.
For more login pages, install and use directly here.
React Login Page
This component is designed to facilitate the development of additional login pages and offers a highly flexible API for modifying packaged login page components.
$3
``bash`
npm install react-login-page --save
$3
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';
import Logo from 'react-login-page/logo';
const Demo = () => {
return (
{({ fields, buttons, blocks, $$index }) => {
return (
{blocks.logo} {blocks.title}
{buttons.submit}
{buttons.reset}
);
}}
Login
Submit
Reset
);
};
export default Demo;
`
Change the control order by using index, Provide more flexible API encapsulation.
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';
import Logo from 'react-login-page/logo-rect';
const Demo = () => {
return (
{({ blocks, extra, $$index }, { fields, buttons }) => {
return (
{blocks.logo} {blocks.title}
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return (
);
})}
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return React.cloneElement(item.children, {
...item.props,
key: item.name + idx,
});
})}
);
}}
Login
Remember me
Submit
Reset
);
};
export default Demo;
`
$3
There are two default logos built-in, with a special way to import them. See below for reference:
`tsx`
import Logo from 'react-login-page/logo';
import Logo from 'react-login-page/logo-rect';
⚠️ If you don't use them, they won't be packaged.
`jsx mdx:preview
import React from 'react';
import Logo from 'react-login-page/logo';
import LogoRect from 'react-login-page/logo-rect';
const Demo = () => {
return (
);
};
export default Demo;
`
$3
jsx
import Login, { Block } from 'react-login-page';Login
Login
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';const Demo = () => {
const [name, setName] = React.useState(1);
return (
{({ blocks, fields, $$index, extra }, data) => }
{name} Login
);
};
export default Demo;
`jsx
import { PropsWithChildren, AllHTMLAttributes } from 'react';
import { BlockTagType } from 'react-login-page';export interface BlockProps extends AllHTMLAttributes {
keyname?: string;
/**
* @deprecated use
keyname
*/
name?: string;
/* Can be shown or hidden with controls /
visible?: boolean;
/* "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. /
index?: number;
/* custom created element /
tagName?: T;
}
export declare const Block: {
(props: PropsWithChildren>>): null;
displayName: string;
};
$3
jsx
import Login, { Input } from 'react-login-page';
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';const Demo = () => {
return (
{({ blocks, fields, $$index, extra }, data) => (
)}
extra content
);
};
export default Demo;
`tsx
import React, { FC, PropsWithChildren } from 'react';
export interface InputProps extends React.InputHTMLAttributes {
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use name
*/
rename?: string;
/* Can be shown or hidden with controls /
visible?: boolean;
/* "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. /
index?: number;
}
export declare const Input: FC>;
can display extra content`jsx
Remember me
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';
import Logo from 'react-login-page/logo-rect';const Demo = () => {
return (
{({ blocks, fields, $$index, extra }, data) => {
return (
);
}}
Remember me
);
};
export default Demo;
`$3
jsx
import Login, { Textarea } from 'react-login-page';
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';const Demo = () => {
return (
{({ blocks, fields, $$index, extra }, data) => (
)}
extra content
);
};
export default Demo;
`ts
import React, { FC, PropsWithChildren } from 'react';
export interface TextareaProps extends React.InputHTMLAttributes {
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use name
*/
rename?: string;
/* Can be shown or hidden with controls /
visible?: boolean;
/* "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. /
index?: number;
}
export declare const Textarea: FC>;
$3
jsx
import Login, { Select } from 'react-login-page';
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';const Demo = () => {
return (
{({ blocks, fields, $$index, extra }, data) => }
);
};
export default Demo;
`ts
import React, { FC, PropsWithChildren } from 'react';
export interface SelectProps extends React.InputHTMLAttributes {
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use name
*/
rename?: string;
/* Can be shown or hidden with controls /
visible?: boolean;
/* "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. /
index?: number;
}
export declare const Select: FC>;
$3
jsx
import Login, { Button } from 'react-login-page';Login
Login
`jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';const Demo = () => {
return (
{({ blocks, buttons, fields, $$index, extra }, data) => }
Login
);
};
export default Demo;
`jsx
import type { FC, PropsWithChildren } from 'react';
export interface ButtonProps extends React.ButtonHTMLAttributes {
keyname?: string;
/* Can be shown or hidden with controls /
visible?: boolean;
/* "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. /
index?: number;
}
export declare const Button: FC>;
`$3
jsx
import { Render } from 'react-login-page';
{({ fields, buttons, blocks, extra, $$index }, data) => {
// data.blocks => Array
// data.buttons => Array
// data.fields => Array
return (
{blocks.logo} {blocks.title}
{buttons.submit}
{buttons.reset}
);
}}
`tsx
import { type FC } from 'react';
import { RenderStateProps, InitialState } from 'react-login-page';
export type RenderChildren =
| {
children?: (props: Required, data: InitialState['data']) => React.ReactNode;
}
| {
children?: React.ReactNode;
};
export declare const Render: FC;
`
refers to the use of indexes to control the order of controls`tsx
{({ blocks, extra, $$index }, { fields, buttons }) => {
return (
{blocks.logo} {blocks.title}
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return ;
})}
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
const child = item.children;
if (!isValidElement(child)) return null;
return cloneElement(child, {
...child.props,
key: item.name + idx,
});
})}
);
}}
`$3
jsx mdx:preview
import React from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-login-page';const RenderLoginPage = () => {
const { fields, extra, $$index, buttons, blocks, data } = useStore();
return (
{blocks.logo} {blocks.title}
{buttons.submit}
{buttons.reset}
);
};
const Demo = () => {
return (
⚛️
Login
Submit
Reset
);
};
export default Demo;
`
refers to the use of indexes to control the order of controls`jsx mdx:preview
import React, { isValidElement, cloneElement } from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-login-page';const RenderLoginPage = () => {
const { blocks, data, $$index, extra } = useStore();
const { fields, buttons } = data;
return (
{blocks.logo} {blocks.title}
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return ;
})}
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
const child = item.children;
if (!isValidElement(child)) return null;
return cloneElement(child, {
...child.props,
key: item.name + idx,
});
})}
);
};
const Demo = () => {
return (
⚛️
Login
Submit
Reset
);
};
export default Demo;
``Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.