Skip to content

Commit 48e18b1

Browse files
jaywcjlovejaywcjlove
committed
doc(login-page): update README.md
1 parent 910df67 commit 48e18b1

File tree

1 file changed

+128
-73
lines changed

1 file changed

+128
-73
lines changed

‎core/README.md‎

Lines changed: 128 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,7 @@
4040

4141
<!--rehype:ignore:end-->
4242

43-
Getting Started
44-
===
43+
# Getting Started
4544

4645
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](https://uiwjs.github.io/react-login-page). We also welcome [recommendations](https://github.com/uiwjs/react-login-page/issues/new/choose) for more cool login pages, which we will turn into React components.
4746

@@ -66,10 +65,12 @@ const Demo = () => {
6665
return (
6766
<Login>
6867
<Render>
69-
{({ fields, buttons, blocks }) => {
68+
{({ fields, buttons, blocks, $$index }) => {
7069
return (
7170
<div>
72-
<header>{blocks.logo} {blocks.title}</header>
71+
<header>
72+
{blocks.logo} {blocks.title}
73+
</header>
7374
<div>
7475
<label>{fields.username}</label>
7576
</div>
@@ -87,14 +88,20 @@ const Demo = () => {
8788
<Login.Block name="logo" tagName="span">
8889
<Logo />
8990
</Login.Block>
90-
<Login.Block name="title" tagName="span">Login</Login.Block>
91+
<Login.Block name="title" tagName="span">
92+
Login
93+
</Login.Block>
9194
<Login.Input name="username" placeholder="Please input Username" />
9295
<Login.Input name="password" placeholder="please enter password" />
93-
<Login.Button name="submit" type="submit">Submit</Login.Button>
94-
<Login.Button name="reset" type="reset">Reset</Login.Button>
96+
<Login.Button name="submit" type="submit">
97+
Submit
98+
</Login.Button>
99+
<Login.Button name="reset" type="reset">
100+
Reset
101+
</Login.Button>
95102
</Login>
96103
);
97-
}
104+
};
98105
export default Demo;
99106
```
100107

@@ -109,24 +116,32 @@ const Demo = () => {
109116
return (
110117
<Login>
111118
<Render>
112-
{({ blocks, extra }, { fields, buttons }) => {
119+
{({ blocks, extra, $$index }, { fields, buttons }) => {
113120
return (
114121
<div>
115-
<header>{blocks.logo} {blocks.title}</header>
116-
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
117-
return (
118-
<div key={item.name + idx}>
119-
<label>{item.children} {extra[item.name]}</label>
120-
</div>
121-
);
122-
})}
123-
<div>
124-
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
125-
return React.cloneElement(item.children, {
126-
...item.props,
127-
key: item.name + idx,
128-
})
122+
<header>
123+
{blocks.logo} {blocks.title}
124+
</header>
125+
{fields
126+
.sort((a, b) => a.index - b.index)
127+
.map((item, idx) => {
128+
return (
129+
<div key={item.name + idx}>
130+
<label>
131+
{item.children} {extra[item.name]}
132+
</label>
133+
</div>
134+
);
129135
})}
136+
<div>
137+
{buttons
138+
.sort((a, b) => a.index - b.index)
139+
.map((item, idx) => {
140+
return React.cloneElement(item.children, {
141+
...item.props,
142+
key: item.name + idx,
143+
});
144+
})}
130145
</div>
131146
</div>
132147
);
@@ -135,9 +150,11 @@ const Demo = () => {
135150
<Login.Block name="logo" tagName="span">
136151
<Logo />
137152
</Login.Block>
138-
<Login.Block name="title" tagName="span">Login</Login.Block>
153+
<Login.Block name="title" tagName="span">
154+
Login
155+
</Login.Block>
139156
<Login.Textarea name="note"></Login.Textarea>
140-
<Login.Select name="select" defaultValue="1" >
157+
<Login.Select name="select" defaultValue="1">
141158
<option value="w">Choose an item...</option>
142159
<option value="1">One</option>
143160
<option value="2">Two</option>
@@ -149,11 +166,15 @@ const Demo = () => {
149166
</Login.Input>
150167
<Login.Input name="username" index={1} placeholder="Please input Username" />
151168
<Login.Input name="password" index={0} placeholder="please enter password" />
152-
<Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
153-
<Login.Button name="reset" index={0} type="reset">Reset</Login.Button>
169+
<Login.Button name="submit" index={1} type="submit">
170+
Submit
171+
</Login.Button>
172+
<Login.Button name="reset" index={0} type="reset">
173+
Reset
174+
</Login.Button>
154175
</Login>
155176
);
156-
}
177+
};
157178
export default Demo;
158179
```
159180

@@ -236,7 +257,7 @@ const Demo = () => {
236257
return (
237258
<Login>
238259
<Render>
239-
{({ blocks, fields, extra }, data) => {
260+
{({ blocks, fields, $$index, extra }, data) => {
240261
return (
241262
<label>
242263
{fields.checkbox} {extra.checkbox}
@@ -249,7 +270,7 @@ const Demo = () => {
249270
</Login.Input>
250271
</Login>
251272
);
252-
}
273+
};
253274
export default Demo;
254275
```
255276

@@ -333,13 +354,15 @@ export declare const Button: FC<PropsWithChildren<ButtonProps>>;
333354
import { Render } from 'react-login-page';
334355

335356
<Render>
336-
{({ fields, buttons, blocks, extra }, data) => {
357+
{({ fields, buttons, blocks, extra, $$index }, data) => {
337358
// data.blocks => Array
338359
// data.buttons => Array
339360
// data.fields => Array
340361
return (
341362
<div>
342-
<header>{blocks.logo} {blocks.title}</header>
363+
<header>
364+
{blocks.logo} {blocks.title}
365+
</header>
343366
<label>{fields.username}</label>
344367
<label>{fields.password}</label>
345368
<div>
@@ -349,40 +372,48 @@ import { Render } from 'react-login-page';
349372
</div>
350373
);
351374
}}
352-
</Render>
375+
</Render>;
353376
```
354377

355378
```tsx
356379
import { FC } from 'react';
357380
import { RenderStateProps, InitialState } from 'react-login-page';
358-
export type RenderChildren = {
359-
children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
360-
} | {
361-
children?: React.ReactNode;
362-
};
381+
export type RenderChildren =
382+
| {
383+
children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
384+
}
385+
| {
386+
children?: React.ReactNode;
387+
};
363388
export declare const Render: FC<RenderChildren>;
364389
```
365390

366391
**`index`** refers to the use of indexes to control the order of controls
367392

368393
```tsx
369394
<Render>
370-
{({ blocks, extra }, { fields, buttons }) => {
395+
{({ blocks, extra, $$index }, { fields, buttons }) => {
371396
return (
372397
<div>
373-
<header>{blocks.logo} {blocks.title}</header>
374-
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
375-
return <label key={item.name + idx}>{item.children}</label>
376-
})}
377-
<div>
378-
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
379-
const child = item.children;
380-
if (!isValidElement(child)) return null;
381-
return cloneElement(child, {
382-
...child.props,
383-
key: item.name + idx,
384-
})
398+
<header>
399+
{blocks.logo} {blocks.title}
400+
</header>
401+
{fields
402+
.sort((a, b) => a.index - b.index)
403+
.map((item, idx) => {
404+
return <label key={item.name + idx}>{item.children}</label>;
385405
})}
406+
<div>
407+
{buttons
408+
.sort((a, b) => a.index - b.index)
409+
.map((item, idx) => {
410+
const child = item.children;
411+
if (!isValidElement(child)) return null;
412+
return cloneElement(child, {
413+
...child.props,
414+
key: item.name + idx,
415+
});
416+
})}
386417
</div>
387418
</div>
388419
);
@@ -397,10 +428,12 @@ import React from 'react';
397428
import Login, { Render, Provider, Container, useStore } from 'react-login-page';
398429

399430
const RenderLoginPage = () => {
400-
const { fields, extra, buttons, blocks, data } = useStore();
431+
const { fields, extra, $$index, buttons, blocks, data } = useStore();
401432
return (
402433
<Render>
403-
<header>{blocks.logo} {blocks.title}</header>
434+
<header>
435+
{blocks.logo} {blocks.title}
436+
</header>
404437
<label>{fields.username}</label>
405438
<label>{fields.password}</label>
406439
<div>
@@ -409,23 +442,31 @@ const RenderLoginPage = () => {
409442
</div>
410443
</Render>
411444
);
412-
}
445+
};
413446

414447
const Demo = () => {
415448
return (
416449
<Provider>
417450
<Container>
418451
<RenderLoginPage />
419452
</Container>
420-
<Login.Block name="logo" tagName="span">⚛️</Login.Block>
421-
<Login.Block name="title" tagName="span">Login</Login.Block>
453+
<Login.Block name="logo" tagName="span">
454+
⚛️
455+
</Login.Block>
456+
<Login.Block name="title" tagName="span">
457+
Login
458+
</Login.Block>
422459
<Login.Input name="username" placeholder="Please input Username" />
423460
<Login.Input name="password" placeholder="please enter password" />
424-
<Login.Button name="submit" type="submit">Submit</Login.Button>
425-
<Login.Button name="reset" type="reset">Reset</Login.Button>
461+
<Login.Button name="submit" type="submit">
462+
Submit
463+
</Login.Button>
464+
<Login.Button name="reset" type="reset">
465+
Reset
466+
</Login.Button>
426467
</Provider>
427468
);
428-
}
469+
};
429470

430471
export default Demo;
431472
```
@@ -437,43 +478,57 @@ import React, { isValidElement, cloneElement } from 'react';
437478
import Login, { Render, Provider, Container, useStore } from 'react-login-page';
438479

439480
const RenderLoginPage = () => {
440-
const { blocks, data, extra } = useStore();
481+
const { blocks, data, $$index, extra } = useStore();
441482
const { fields, buttons } = data;
442483
return (
443484
<Render>
444-
<header>{blocks.logo} {blocks.title}</header>
445-
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
446-
return <label key={item.name + idx}>{item.children}</label>
447-
})}
485+
<header>
486+
{blocks.logo} {blocks.title}
487+
</header>
488+
{fields
489+
.sort((a, b) => a.index - b.index)
490+
.map((item, idx) => {
491+
return <label key={item.name + idx}>{item.children}</label>;
492+
})}
448493
<div>
449-
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
494+
{buttons
495+
.sort((a, b) => a.index - b.index)
496+
.map((item, idx) => {
450497
const child = item.children;
451498
if (!isValidElement(child)) return null;
452499
return cloneElement(child, {
453500
...child.props,
454501
key: item.name + idx,
455-
})
456-
})}
502+
});
503+
})}
457504
</div>
458505
</Render>
459506
);
460-
}
507+
};
461508

462509
const Demo = () => {
463510
return (
464511
<Provider>
465512
<Container>
466513
<RenderLoginPage />
467514
</Container>
468-
<Login.Block name="logo" tagName="span">⚛️</Login.Block>
469-
<Login.Block name="title" tagName="span">Login</Login.Block>
515+
<Login.Block name="logo" tagName="span">
516+
⚛️
517+
</Login.Block>
518+
<Login.Block name="title" tagName="span">
519+
Login
520+
</Login.Block>
470521
<Login.Input name="username" index={1} placeholder="Please input Username" />
471522
<Login.Input name="password" placeholder="please enter password" />
472-
<Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
473-
<Login.Button name="reset" type="reset">Reset</Login.Button>
523+
<Login.Button name="submit" index={1} type="submit">
524+
Submit
525+
</Login.Button>
526+
<Login.Button name="reset" type="reset">
527+
Reset
528+
</Login.Button>
474529
</Provider>
475530
);
476-
}
531+
};
477532

478533
export default Demo;
479534
```

0 commit comments

Comments
 (0)