@react-login-page/page10 - npm explorer

@react-login-page/page10

v1.0.6TypeScript

Some `react` login pages, which can be used quickly after installation.

react login login-page login-pages react-login react-login-page editor syntax ide code

0/weekUpdated 5 months agoMITUnpacked: 628.2 KB

Published by kenny wong

npm install @react-login-page/page10

Repository Homepage npm

@react-login-page/page10

![Buy me a coffee](https://jaywcjlove.github.io/#/sponsor)
![npm version](https://www.npmjs.com/package/@react-login-page/page10)
![Downloads](https://www.npmjs.com/package/@react-login-page/page10)

Install

``bash $ npm install @react-login-page/page10 --save`

`Usage`

`jsx mdx:preview import React from 'react'; import Login from '@react-login-page/page10'; import LoginImg from '@react-login-page/page10/bg.png'; import LoginInnerBgImg from '@react-login-page/page10/inner-bg.jpg';

const Demo = () => ( url(${LoginImg}) }}> url(${LoginInnerBgImg}) }} /> url(${LoginInnerBgImg}) }} /> );

export default Demo; `

`Modify Controls`

`jsx mdx:preview import React from 'react'; import LoginPage, { Email, Password, InnerBox, TitleSignup, TitleLogin, Submit, Title, Logo, } from '@react-login-page/page10'; import LoginLogo from 'react-login-page/logo'; import LoginImg from '@react-login-page/page10/bg.png'; import LoginInnerBgImg from '@react-login-page/page10/inner-bg.jpg';

const Demo = () => ( style={{ height: 690, backgroundImage: url(${LoginImg}), '--login-inner-image': url("${LoginInnerBgImg}") }} > url(${LoginInnerBgImg}) }} /> url(${LoginInnerBgImg}) }} /> <br /> <TitleSignup>注册</TitleSignup><br /> <TitleLogin>登录</TitleLogin><br /> <Logo><br /> <LoginLogo /><br /> </Logo><br /> <Email placeholder="请输入用户名" name="userUserName" /><br /> <Password placeholder="请输入密码" name="userPassword" /><br /> <Submit keyname="submit">提交</Submit><br /> <Submit keyname="reset">重置</Submit></p><p class="my-3"> <Email panel="signup" placeholder="E-mail" keyname="e-mail" /><br /> <Password panel="signup" placeholder="请输入密码" keyname="password" /><br /> <Password panel="signup" placeholder="请输入确认密码" keyname="confirm-password" /><br /> <Submit panel="signup" keyname="signup-submit"><br /> 注册<br /> </Submit><br /> <Submit panel="signup" keyname="signup-reset"><br /> 重置<br /> </Submit><br /> </LoginPage><br />);</p><p class="my-3">export default Demo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Hide Controls</h2></p><p class="my-3">Use </code>visible={false}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to hide controls.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx mdx:preview<br />import React from 'react';<br />import LoginPage, { Reset, Logo, Password, Footer } from '@react-login-page/page10';<br />import LoginLogo from 'react-login-page/logo-rect';<br />import LoginImg from '@react-login-page/page10/bg.png';</p><p class="my-3">const Demo = () => (<br /> <LoginPage style={{ height: 690, backgroundImage: </code>url(${LoginImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }}><br /> <Logo><br /> <LoginLogo /><br /> </Logo><br /> <Password panel="signup" visible={false} keyname="confirm-password" /><br /> <Password visible={false} /><br /> <Footer><br /> Not a member? <a href="#">Sign up now</a><br /> </Footer><br /> </LoginPage><br />);</p><p class="my-3">export default Demo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Add Controls</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx mdx:preview<br />import React from 'react';<br />import LoginPage, { Reset, Submit, Title, Logo, Footer, Email, Password } from '@react-login-page/page10';<br />import LoginLogo from 'react-login-page/logo-rect';<br />import LoginImg from '@react-login-page/page10/bg.png';</p><p class="my-3">const imgSrc =<br /> 'data:image/png;base64,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';</p><p class="my-3">const Demo = () => {<br /> const [data, setData] = React.useState({});<br /> const handle = (even) => {<br /> even.preventDefault();<br /> const formData = new FormData(even.target);<br /> const data = Object.fromEntries(formData);<br /> setData({ ...data });<br /> };<br /> return (<br /> <form onSubmit={handle}><br /> <LoginPage style={{ height: 990, '--login-inner-height': '580px', backgroundImage: </code>url(${LoginImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }}><br /> <Logo><br /> <LoginLogo /><br /> </Logo><br /> <Title /><br /> <Email keyname="subtitle" visible={false} index={0}><br /> 欢迎登录页面<br /> </Email><br /> {/<em> hide default Email field </em>/}<br /> <Email visible={false} /><br /> <Email keyname="fields" index={3} placeholder="修改了 name 字段" /><br /> <Email keyname="code" index={2} placeholder="验证码" label={<img src={imgSrc} height={38} />}><br /> xx<br /> </Email><br /> <Email keyname="email_rule" visible={false} index={4}><br /> 用户名规则<br /> </Email><br /> <Password index={1} placeholder="密码" /><br /> <Footer><br /> Not a member? <a href="#">Sign up now</a><br /> </Footer><br /> <Submit>登录</Submit></p><p class="my-3"> <Email panel="signup" label="邮箱" type="email" placeholder="请输入邮箱" keyname="e-mail" /><br /> <Password panel="signup" label="密码" placeholder="请输出密码" keyname="password" /><br /> <Password panel="signup" label="确认密码" placeholder="请确认密码" keyname="confirm-password" /><br /> <Submit keyname="signup-submit" panel="signup"><br /> 注册<br /> </Submit><br /> <Footer panel="signup"><br /> Not a member? <a href="#">Login now</a><br /> </Footer><br /> </LoginPage><br /> <pre>{JSON.stringify(data, null, 2)}</pre><br /> </form><br /> );<br />};</p><p class="my-3">export default Demo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Modify default control </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Modify the string that specifies the <strong></code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> of the input control by default</p><p class="my-3">1. remove default </code>name=username<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> controls</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Email visible={false} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">2. add </code>name=user<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> controls</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Email keyname="user" index={3} placeholder="修改了 name 字段" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Modify Color Style</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx mdx:preview<br />import React from 'react';<br />import Login from '@react-login-page/page10';</p><p class="my-3">const css = {<br /> '--login-bg': '#135344',<br /> '--login-color': '#c4c3ca',<br /> '--login-inner-height': '460px',<br /> '--login-inner-bg': '#19725f',<br /> '--login-input': '#c4c3ca',<br /> '--login-input-bg': '#1f2029',<br /> '--login-input-placeholder': '#49475d',<br /> '--login-input-placeholder-active': '#53e3a6',<br /> '--login-input-bg-hover': '#191821',<br /> '--login-input-bg-focus': '#23222e',<br /> '--login-input-shadow': '0 4px 8px 0 rgba(21,21,21,.2)',<br /> '--login-btn': '#fff',<br /> '--login-btn-bg': '#a7e245',<br /> '--login-btn-focus': 'white',<br /> '--login-btn-hover': '#53e3a6',<br /> '--login-btn-active': '#1aa97d',<br /> '--login-footer': '#ffffff99',<br /> '--login-icon-color': '#ffeba7',<br /> '--login-icon-toggle-color': '#b400ff',<br />};</p><p class="my-3">const Demo = () => <Login style={{ height: 690, ...css }} />;</p><p class="my-3">export default Demo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Use css variables to override default color values</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />.login-page10 {<br /> --login-bg: #1f2029;<br /> --login-color: #c4c3ca;<br /> --login-inner-height: 460px;<br /> --login-inner-bg: #2a2b38;<br /> --login-input: #c4c3ca;<br /> --login-input-bg: #1f2029;<br /> --login-input-placeholder: #49475d;<br /> --login-input-placeholder-active: #53e3a6;<br /> --login-input-bg-hover: #191821;<br /> --login-input-bg-focus: #23222e;<br /> --login-input-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);<br /> --login-btn: #fff;<br /> --login-btn-bg: #a7e245;<br /> --login-btn-focus: white;<br /> --login-btn-hover: #53e3a6;<br /> --login-btn-active: #1aa97d;<br /> --login-footer: #ffffff99;<br /> --login-icon-color: #ffeba7;<br /> --login-icon-toggle-color: #102770;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Custom CSS style overrides</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />.login-page10 section button:focus {<br /> box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26);<br />}<br />.login-page10 section button:hover {<br /> background-color: #0070bd;<br />}<br />.login-page10 section button:active {<br /> background-color: #00528a;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Light & Dark Theme</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />[data-color-mode*='dark'] .login-page10,<br />.login-page10 {<br /> --login-bg: #1f2029;<br /> --login-color: #c4c3ca;<br /> --login-inner-height: 460px;<br /> --login-inner-bg: #2a2b38;<br /> --login-input: #c4c3ca;<br /> --login-input-bg: #1f2029;<br /> --login-input-placeholder: #49475d;<br /> --login-input-placeholder-active: #53e3a6;<br /> --login-input-bg-hover: #191821;<br /> --login-input-bg-focus: #23222e;<br /> --login-input-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);<br /> --login-btn: #fff;<br /> --login-btn-bg: #a7e245;<br /> --login-btn-focus: white;<br /> --login-btn-hover: #53e3a6;<br /> --login-btn-active: #1aa97d;<br /> --login-footer: #ffffff99;<br /> --login-icon-color: #ffeba7;<br /> --login-icon-toggle-color: #102770;<br />}<br />[data-color-mode*='light'] .login-page10 {<br /> --login-bg: #1f2029;<br /> --login-color: #c4c3ca;<br /> --login-inner-height: 460px;<br /> --login-inner-bg: #2a2b38;<br /> --login-input: #c4c3ca;<br /> --login-input-bg: #1f2029;<br /> --login-input-placeholder: #49475d;<br /> --login-input-placeholder-active: #53e3a6;<br /> --login-input-bg-hover: #191821;<br /> --login-input-bg-focus: #23222e;<br /> --login-input-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);<br /> --login-btn: #fff;<br /> --login-btn-bg: #a7e245;<br /> --login-btn-focus: white;<br /> --login-btn-hover: #53e3a6;<br /> --login-btn-active: #1aa97d;<br /> --login-footer: #ffffff99;<br /> --login-icon-color: #ffeba7;<br /> --login-icon-toggle-color: #102770;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3">Components be provided to modify control properties and perform other related functions.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import LoginPage from '@react-login-page/page10';<br />// buttons<br />import { Reset, Submit } from '@react-login-page/page10';<br />// blocks<br />import { Logo, InnerBox, Title, TitleLogin, TitleSignup, Footer } from '@react-login-page/page10';<br />// fields<br />import { Email, Password } from '@react-login-page/page10';</p><p class="my-3">import LoginBgImg from '@react-login-page/page9/bg.png';<br />import LoginInnerBgImg from '@react-login-page/page9/inner-bg.jpg';</p><p class="my-3"><LoginPage><br /> <Password index={2} /><br /></LoginPage></p><p class="my-3">// Define the order of </code>Password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> controls<br /><Password index={2} /></p><p class="my-3">// Hiding the </code>Password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> control<br /><Password visible={false} /></p><p class="my-3">// Add footer content<br /><Footer><br /> Not a member? <a href="#">Sign up now</a><br /></Footer></p><p class="my-3">// Modify logo image<br /><Logo>⚛️</Logo></p><p class="my-3"><InnerBox style={{ backgroundImage: </code>url(${LoginInnerBgImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }} /><br /><InnerBox panel="signup" style={{ backgroundImage: </code>url(${LoginInnerBgImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }} /></p><p class="my-3">// Signup Fields<br /><Email panel="signup" keyname="e-mail" /><br /><Password panel="signup" placeholder="Your Password" keyname="password" /><br /><Password panel="signup" placeholder="Confirm Password" keyname="confirm-password" /><br /><Submit panel="signup" keyname="signup-submit"><br /> Signup<br /></Submit><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Use <a href="https://legacy.reactjs.org/docs/jsx-in-depth.html#using-dot-notation-for-jsx-type" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">dot notation</a> components.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import Login from '@react-login-page/page10';</p><p class="my-3"><Login><br /> <Login.Password index={2} /><br /></Login></p><p class="my-3">// Define the order of </code>Password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> controls<br /><Login.Password index={2} /></p><p class="my-3"><Login.InnerBox style={{ backgroundImage: </code>url(${LoginInnerBgImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }} /><br /><Login.InnerBox panel="signup" style={{ backgroundImage: </code>url(${LoginInnerBgImg})<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }} /></p><p class="my-3">// Hiding the </code>Password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> control<br /><Login.Password visible={false} /></p><p class="my-3">// Add footer content<br /><Login.Footer><br /> Not a member? <a href="#">Sign up now</a><br /></Login.Footer></p><p class="my-3">// Modify logo image<br /><Login.Logo>⚛️</Login.Logo></p><p class="my-3">// Signup Fields<br /><Login.Email panel="signup" keyname="e-mail" /><br /><Login.Password panel="signup" placeholder="Your Password" keyname="password" /><br /><Login.Password panel="signup" placeholder="Confirm Password" keyname="confirm-password" /><br /><Login.Submit panel="signup" keyname="signup-submit"><br /> Signup<br /></Login.Submit><br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributors</h2></p><p class="my-3">As always, thanks to our amazing contributors!</p><p class="my-3"><a href="https://github.com/uiwjs/react-login-page/graphs/contributors"><br /> <img src="https://uiwjs.github.io/react-login-page/CONTRIBUTORS.svg" /><br /></a></p><p class="my-3">Made with <a href="https://github.com/jaywcjlove/github-action-contributors" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contributors</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">Licensed under the MIT License.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"@babel/runtime\",{\"href\":\"/package/%40babel%2Fruntime\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/runtime\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=7.11.0\"}]]}],[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=16.8.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=16.8.0\"}]]}]]}]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>