Skip to content

Commit 4b4f513

Browse files
restuwahyu13restuwahyu13
committed
update readme doc
1 parent 3970d64 commit 4b4f513

1 file changed

Lines changed: 92 additions & 111 deletions

File tree

‎README.md‎

Lines changed: 92 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -38,30 +38,23 @@ npm i react-fakers | yarn add react-fakers
3838
import { useFaker } from 'react-fakers'
3939

4040
const App = () => {
41-
const [state, setState] = useState(false)
42-
const { success, error } = useFaker()
43-
44-
useEffect(() => {
45-
if (success) {
46-
setState(true)
47-
}
48-
}, [])
41+
const { success, error, loading } = useFaker()
4942

5043
if (error) {
5144
alert(error.message)
5245
}
5346

5447
return (
5548
<>
56-
{!state && <h4>Loading....</h4>}
57-
{state &&
58-
success.map((val, id) => (
59-
<ul key={val.uuid}>
60-
<li>
49+
{!loading && <h4>Loading....</h4>}
50+
<ul>
51+
{loading &&
52+
success.map((val, id) => (
53+
<li key={val.uuid}>
6154
{val.firstname} {val.lastname} - {val.email}
6255
</li>
63-
</ul>
64-
))}
56+
))}
57+
</ul>
6558
</>
6659
)
6760
}
@@ -76,33 +69,27 @@ npm i react-fakers | yarn add react-fakers
7669
import { useFaker } from 'react-fakers'
7770

7871
const App = () => {
79-
const [state, setState] = useState(false)
80-
const { success, error } = useFaker({
72+
73+
const { success, error, loading } = useFaker({
8174
type: 'addresses',
8275
params: { addresses: { quantity: 5 } }
8376
})
8477

85-
useEffect(() => {
86-
if (success) {
87-
setState(true)
88-
}
89-
}, [])
90-
9178
if (error) {
9279
alert(error.message)
9380
}
9481

9582
return (
96-
<>
97-
{!state && <h4>Loading....</h4>}
98-
{state &&
99-
success.map((val, id) => (
100-
<ul key={val.uuid}>
101-
<li>
102-
{val.street} - {val.streetName} - {val.zipcode}
83+
<>
84+
{!loading && <h4>Loading....</h4>}
85+
<ul>
86+
{loading &&
87+
success.map((val, id) => (
88+
<li key={val.uuid}>
89+
{val.firstname} {val.lastname} - {val.email}
10390
</li>
104-
</ul>
105-
))}
91+
))}
92+
</ul>
10693
</>
10794
)
10895
}
@@ -117,30 +104,24 @@ npm i react-fakers | yarn add react-fakers
117104
import { useJsonPlaceHolder } from 'react-fakers'
118105

119106
const App = () => {
120-
const [state, setState] = useState(false)
121-
const { success, error } = useJsonPlaceHolder()
122-
123-
useEffect(() => {
124-
if (success) {
125-
setState(true)
126-
}
127-
}, [])
107+
108+
const { success, error, loading } = useJsonPlaceHolder()
128109

129110
if (error) {
130111
alert(error.message)
131112
}
132113

133114
return (
134115
<>
135-
{!state && <h4>Loading....</h4>}
136-
{state &&
137-
success.map((val, id) => (
138-
<ul key={id}>
139-
<li>
116+
{!loading && <h4>Loading....</h4>}
117+
<ul>
118+
{loading &&
119+
success.map((val, id) => (
120+
<li key={id}>
140121
{val.name} - {val.email}
141122
</li>
142-
</ul>
143-
))}
123+
))}
124+
</ul>
144125
</>
145126
)
146127
}
@@ -155,34 +136,28 @@ npm i react-fakers | yarn add react-fakers
155136
import { useJsonPlaceHolder } from 'react-fakers'
156137

157138
const App = () => {
158-
const [state, setState] = useState(false)
159-
const { success, error } = useJsonPlaceHolder({
139+
140+
const { success, error, loading } = useJsonPlaceHolder({
160141
type: 'posts',
161142
params: { posts: { userId: 1 } },
162143
options: { limit: 3 }
163144
})
164145

165-
useEffect(() => {
166-
if (success) {
167-
setState(true)
168-
}
169-
}, [])
170-
171146
if (error) {
172147
alert(error.message)
173148
}
174149

175150
return (
176151
<>
177-
{!state && <h4>Loading....</h4>}
178-
{state &&
179-
success.map((val, id) => (
180-
<ul key={id}>
181-
<li>
152+
{!loading && <h4>Loading....</h4>}
153+
<ul>
154+
{loading &&
155+
success.map((val, id) => (
156+
<li key={id}>
182157
{val.id} - {val.title}
183158
</li>
184-
</ul>
185-
))}
159+
))}
160+
</ul>
186161
</>
187162
)
188163
}
@@ -225,15 +200,15 @@ npm i react-fakers | yarn add react-fakers
225200
<>
226201
<Faker success={this.onSuccess} error={this.onError} />
227202

228-
{!this.state.loading && <h4>Loading....</h4>}
229-
{this.state.loading &&
230-
this.state.data.map((val, id) => (
231-
<ul key={val.uuid}>
232-
<li>
233-
{val.firstname} {val.lastname} - {val.email}
234-
</li>
235-
</ul>
236-
))}
203+
{!this.state.loading && <h4>Loading....</h4>}
204+
<ul>
205+
{this.state.loading &&
206+
this.state.data.map((val, id) => (
207+
<li key={val.uuid}>
208+
{val.firstname} {val.lastname} - {val.email}
209+
</li>
210+
))}
211+
</ul>
237212
</>
238213
)
239214
}
@@ -281,14 +256,14 @@ npm i react-fakers | yarn add react-fakers
281256
/>
282257

283258
{!this.state.loading && <h4>Loading....</h4>}
284-
{this.state.loading &&
285-
this.state.data.map((val, id) => (
286-
<ul key={val.uuid}>
287-
<li>
259+
<ul>
260+
{this.state.loading &&
261+
this.state.data.map((val, id) => (
262+
<li key={val.uuid}>
288263
{val.street} - {val.streetName} - {val.zipcode}
289264
</li>
290-
</ul>
291-
))}
265+
))}
266+
</ul>
292267
</>
293268
)
294269
}
@@ -331,14 +306,14 @@ npm i react-fakers | yarn add react-fakers
331306
<JsonPlaceHolder success={this.onSuccess} error={this.onError} />
332307

333308
{!this.state.loading && <h4>Loading....</h4>}
334-
{this.state.loading &&
335-
this.state.data.map((val, id) => (
336-
<ul key={id}>
337-
<li>
309+
<ul>
310+
{this.state.loading &&
311+
this.state.data.map((val, id) => (
312+
<li key={id}>
338313
{val.name} - {val.email}
339314
</li>
340-
</ul>
341-
))}
315+
))}
316+
</ul>
342317
</>
343318
)
344319
}
@@ -387,14 +362,14 @@ npm i react-fakers | yarn add react-fakers
387362
/>
388363

389364
{!this.state.loading && <h4>Loading....</h4>}
390-
{this.state.loading &&
391-
this.state.data.map((val, id) => (
392-
<ul key={id}>
393-
<li>
365+
<ul>
366+
{this.state.loading &&
367+
this.state.data.map((val, id) => (
368+
<li key={val.uuid}>
394369
{val.id} - {val.title}
395370
</li>
396-
</ul>
397-
))}
371+
))}
372+
</ul>
398373
</>
399374
)
400375
}
@@ -422,6 +397,11 @@ npm i react-fakers | yarn add react-fakers
422397
| | filters | _object_ | _optional_ | { } | |
423398
| **useUIFaces** | apiKey | _string_ | _optional_ | 43651248-182440F6-8653E4E2-5438FCB2 | To display dummy data from the UI Faces API |
424399
| | params | _object_ | _optional_ | { limit: 10 } | |
400+
| **useStarWars** | type | _string_ | _optional_ | people | To display dummy data from the Star Wars API |
401+
| | params | _object_ | _optional_ | { } | |
402+
| | options | _object_ | _optional_ | { limit: 0 } | |
403+
| | filters | _object_ | _optional_ | { } | |
404+
425405

426406
- **COMPONENTS**
427407

@@ -451,29 +431,30 @@ npm i react-fakers | yarn add react-fakers
451431

452432
| API Name | API Key | Call Per/Day | Call Per/Month |
453433
| ----------------- | ------- | ------------ | -------------- |
454-
| Faker | No | Unlimited | unlimited |
455-
| Json Place Holder | No | Unlimited | unlimited |
456-
| Dummy API | Yes | 500 | undefined |
457-
| UI Faces | Yes | 500 | undefined |
434+
| Faker | No | Unlimited | Unlimited |
435+
| Json Place Holder | No | Unlimited | Unlimited |
436+
| Dummy API | Yes | 500 | Undefined |
437+
| UI Faces | Yes | 500 | Undefined |
438+
| Star Wars | No | Unlimited | Unlimited |
458439

459440
### API LIST
460441

461-
| API Name | Status | Documentation |
462-
| ----------------- | ---------- | ------------------------------------------ |
463-
| Faker | Ready | [Click Here](https://tinyurl.com/yy8m2xvo) |
464-
| Json Place Holder | Ready | [Click Here](https://tinyurl.com/y5s3yfkg) |
465-
| Dummy API | Ready | [Click Here](https://tinyurl.com/y5a6dew8) |
466-
| UI Faces | Ready | [Click Here](https://tinyurl.com/y4cv59qy) |
467-
| Pokemon | Comingsoon | [Click Here]() |
468-
| Star Wars | Comingsoon | [Click Here]() |
469-
| Marvel | Comingsoon | [Click Here]() |
470-
| Harry Potter | Comingsoon | [Click Here]() |
471-
| IMDB | Comingsoon | [Click Here]() |
472-
| The Cat | Comingsoon | [Click Here]() |
473-
| Anime | Comingsoon | [Click Here]() |
474-
| Ricky And Morty | Comingsoon | [Click Here]() |
475-
| Unsplash | Comingsoon | [Click Here]() |
476-
| Listen Notes | Comingsoon | [Click Here]() |
442+
| API Name | Status | Documentation |
443+
| ----------------- | ----------- | ------------------------------------------ |
444+
| Faker | Ready | [Click Here](https://tinyurl.com/yy8m2xvo) |
445+
| Json Place Holder | Ready | [Click Here](https://tinyurl.com/y5s3yfkg) |
446+
| Dummy API | Ready | [Click Here](https://tinyurl.com/y5a6dew8) |
447+
| UI Faces | Ready | [Click Here](https://tinyurl.com/y4cv59qy) |
448+
| Pokemon | Coming Soon | [Click Here]() |
449+
| Star Wars | Ready | [Click Here](https://swapi.dev/) |
450+
| Marvel | Coming Soon | [Click Here]() |
451+
| Harry Potter | Coming Soon | [Click Here]() |
452+
| IMDB | Coming Soon | [Click Here]() |
453+
| The Cat | Coming Soon | [Click Here]() |
454+
| Anime | Coming Soon | [Click Here]() |
455+
| Ricky And Morty | Coming Soon | [Click Here]() |
456+
| Unsplash | Coming Soon | [Click Here]() |
457+
| Listen Notes | Coming Soon | [Click Here]() |
477458

478459
### TRANSLATION
479460

@@ -482,13 +463,13 @@ npm i react-fakers | yarn add react-fakers
482463

483464
### NOTES
484465

485-
- For `Dummy Data` that uses `API KEY` if you have a limit, please visit the `API` provider service, to get your own `API KEY`
466+
- For `Provider` that uses `API KEY` if you have a limit, please visit the `API` provider service, to get your own `API KEY`
486467
- For more information on the `API` available, you can visit the official documentation of each `Provider`
487468
- To find out more about using this tool, you can open the `app-dev/src/examples` in this repository
488469

489470
### CONTRIBUTING
490471

491-
Want to make **React Fakers** more perfect? Let's contribute and follow the [contribution guide.](https://github.com/restuwahyu13/react-fakers/blob/main/CONTRIBUTING.md)
472+
Want to make **React Fakers** more perfect ? Let's contribute and follow the [contribution guide.](https://github.com/restuwahyu13/react-fakers/blob/main/CONTRIBUTING.md)
492473

493474
### BUGS
494475

0 commit comments

Comments
 (0)