https://github.com/restuwahyu13/react-fakers
React-Fakers is a collection of dummy data for application development testing
https://github.com/restuwahyu13/react-fakers
development-tools dummy-api dummy-data dummy-data-generator fake-content fake-data faker faker-library fakerjs react react-faker react-fakers reactjs toolkit
Last synced: 5 days ago
JSON representation
React-Fakers is a collection of dummy data for application development testing
- Host: GitHub
- URL: https://github.com/restuwahyu13/react-fakers
- Owner: restuwahyu13
- License: other
- Created: 2020-11-16T17:51:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T21:56:09.000Z (11 months ago)
- Last Synced: 2024-05-29T12:49:21.744Z (11 months ago)
- Topics: development-tools, dummy-api, dummy-data, dummy-data-generator, fake-content, fake-data, faker, faker-library, fakerjs, react, react-faker, react-fakers, reactjs, toolkit
- Language: JavaScript
- Homepage:
- Size: 1.89 MB
- Stars: 7
- Watchers: 1
- Forks: 5
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
## React Fakers
**React Fakers** is a collection of dummy data from the most popular dummy data providers such as **Json Place Holder, Faker, Pokemon, etc**, for application development testing.
[](https://travis-ci.com/restuwahyu13/react-fakers) [](https://badge.fury.io/js/react-fakers)     [](https://www.codetriage.com/restuwahyu13/react-fakers) [](https://github.com/restuwahyu13/react-fakers/blob/main/CONTRIBUTING.md)
## TABLE OF CONTENT
- [Get Started](#get-started)
- [Installation](#INSTALLATION)
- [Example Usage](#EXAMPLE-USAGE)
- [API Reference](#API-REFERENCE)
- [API Status](#API-STATUS)
- [API List](#API-LIST)
- [Translation](#TRANSLATION)
- [Notes](#NOTES)
- [Contributing](#CONTRIBUTING)
- [Bugs](#BUGS)
- [Author](#AUTHOR)
- [License](#LICENSE)
### INSTALLATION
```sh
npm i react-fakers | yarn add react-fakers
```
### EXAMPLE USAGE
- **Hooks**
- **useFaker**
```js
import React, { useState, useEffect } from 'react'
import { useFaker } from 'react-fakers'
const App = () => {
const { success, error, loading } = useFaker()
if (error) {
alert(error.message)
}
return (
<>
{!loading &&
Loading....
}
-
{val.firstname} {val.lastname} - {val.email}
{loading &&
success.map((val, id) => (
))}
>
)
}
export default App
```
- **useFaker With Params**
```js
import React, { useState, useEffect } from 'react'
import { useFaker } from 'react-fakers'
const App = () => {
const { success, error, loading } = useFaker({
type: 'addresses',
params: { addresses: { quantity: 5 } }
})
if (error) {
alert(error.message)
}
return (
<>
{!loading &&
Loading....
}-
{val.firstname} {val.lastname} - {val.email}
{loading &&
success.map((val, id) => (
))}
>
)
}
export default App
```
- **useJsonPlaceHolder**
```js
import React, { useState, useEffect } from 'react'
import { useJsonPlaceHolder } from 'react-fakers'
const App = () => {
const { success, error, loading } = useJsonPlaceHolder()
if (error) {
alert(error.message)
}
return (
<>
{!loading &&
Loading....
}-
{val.name} - {val.email}
{loading &&
success.map((val, id) => (
))}
>
)
}
export default App
```
- **useJsonPlaceHolder With Params**
```js
import React, { useState, useEffect } from 'react'
import { useJsonPlaceHolder } from 'react-fakers'
const App = () => {
const { success, error, loading } = useJsonPlaceHolder({
type: 'posts',
params: { posts: { userId: 1 } },
options: { limit: 3 }
})
if (error) {
alert(error.message)
}
return (
<>
{!loading &&
Loading....
}-
{val.id} - {val.title}
{loading &&
success.map((val, id) => (
))}
>
)
}
export default App
```
- **Components**
- **Faker**
```js
import React, { Component } from 'react'
import { Faker } from 'react-fakers'
class App extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
data: []
}
}
onSuccess = (res) => {
this.setState({
loading: true,
data: res
})
}
onError = (error) => {
if (error) {
alert(error.message)
}
}
render() {
return (
<>
{!this.state.loading &&
Loading....
}-
{val.firstname} {val.lastname} - {val.email}
{this.state.loading &&
this.state.data.map((val, id) => (
))}
>
)
}
}
export default App
```
- **Faker With Params**
```js
import React, { Component } from 'react'
import { Faker } from 'react-fakers'
class App extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
data: []
}
}
onSuccess = (res) => {
this.setState({
loading: true,
data: res
})
}
onError = (error) => {
if (error) {
alert(error.message)
}
}
render() {
return (
<>
{!this.state.loading &&
Loading....
}-
{val.street} - {val.streetName} - {val.zipcode}
{this.state.loading &&
this.state.data.map((val, id) => (
))}
>
)
}
}
export default App
```
- **JsonPlaceHolder**
```js
import React, { Component } from 'react'
import { JsonPlaceHolder } from 'react-fakers'
class App extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
data: []
}
}
onSuccess = (res) => {
this.setState({
loading: true,
data: res
})
}
onError = (error) => {
if (error) {
alert(error.message)
}
}
render() {
return (
<>
{!this.state.loading &&
Loading....
}-
{val.name} - {val.email}
{this.state.loading &&
this.state.data.map((val, id) => (
))}
>
)
}
}
export default App
```
- **JsonPlaceHolder With Params**
```js
import React, { Component } from 'react'
import { JsonPlaceHolder } from 'react-fakers'
class App extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
data: []
}
}
onSuccess = (res) => {
this.setState({
loading: true,
data: res
})
}
onError = (error) => {
if (error) {
alert(error.message)
}
}
render() {
return (
<>
{!this.state.loading &&
Loading....
}-
{val.id} - {val.title}
{this.state.loading &&
this.state.data.map((val, id) => (
))}
>
)
}
}
export default App
```
### API REFERENCE
- **HOOKS**
| Name | Property | Type Data | Optional/Required | Default Value | Description |
| ---------------------- | -------- | --------- | ----------------- | ----------------------------------- | ---------------------------------------------------- |
| **useFaker** | type | _string_ | _optional_ | users | To display dummy data from the Faker API |
| | params | _object_ | _optional_ | { } | |
| **useJsonPlaceHolder** | type | _string_ | _optional_ | users | To display dummy data from the Json Place Holder API |
| | params | _object_ | _optional_ | { } | |
| | options | _object_ | _optional_ | { limit: 0 } | |
| | filters | _object_ | _optional_ | { } | |
| **useDummy** | type | _object_ | _optional_ | user | To display dummy data from the Dummy API |
| | apiKey | _string_ | _optional_ | 5faa1fab5317ae96860c0be3 | |
| | params | _object_ | _optional_ | { } | |
| | options | _object_ | _optional_ | { limit: 0 } | |
| | filters | _object_ | _optional_ | { } | |
| **useUIFaces** | apiKey | _string_ | _optional_ | 43651248-182440F6-8653E4E2-5438FCB2 | To display dummy data from the UI Faces API |
| | params | _object_ | _optional_ | { limit: 10 } | |
| **useStarWars** | type | _string_ | _optional_ | people | To display dummy data from the Star Wars API |
| | params | _object_ | _optional_ | { } | |
| | options | _object_ | _optional_ | { limit: 0 } | |
| | filters | _object_ | _optional_ | { } | |
- **COMPONENTS**
| Name | Property | Type Data | Optional/Required | Default Value | Description |
| ------------------- | -------- | ---------- | ----------------- | ----------------------------------- | ---------------------------------------------------- |
| **Faker** | success | _function_ | _required_ | | To display dummy data from the Faker API |
| | error | _function_ | _optional_ | | |
| | type | _string_ | _optional_ | users | |
| | params | _object_ | _optional_ | | |
| **JsonPlaceHolder** | success | _function_ | _required_ | | To display dummy data from the Json Place Holder API |
| | error | _function_ | _optional_ | | |
| | type | _string_ | _optional_ | users | |
| | options | _object_ | _optional_ | { limit: 0 } | |
| | filters | _object_ | _optional_ | { } | |
| **Dummy** | success | _function_ | _required_ | | To display dummy data from the Dummy API |
| | error | _function_ | _optional_ | | |
| | apiKey | _string_ | _optional_ | 5faa1fab5317ae96860c0be3 | |
| | params | _object_ | _optional_ | { } | |
| | options | _object_ | _optional_ | { limit: 0 } | |
| | filters | _object_ | _optional_ | { } | |
| **UIFaces** | success | _function_ | _required_ | | To display dummy data from the UI Faces API |
| | error | _function_ | _optional_ | | |
| | apiKey | _string_ | _optional_ | 43651248-182440F6-8653E4E2-5438FCB2 | |
| | params | _object_ | _optional_ | { limit: 10 } | |
### API STATUS
| API Name | API Key | Call Per/Day | Call Per/Month |
| ----------------- | ------- | ------------ | -------------- |
| Faker | No | Unlimited | Unlimited |
| Json Place Holder | No | Unlimited | Unlimited |
| Dummy API | Yes | 500 | Undefined |
| UI Faces | Yes | 500 | Undefined |
| Star Wars | No | Unlimited | Unlimited |
### API LIST
| API Name | Status | Documentation |
| ----------------- | ----------- | ------------------------------------------ |
| Faker | Ready | [Click Here](https://tinyurl.com/yy8m2xvo) |
| Json Place Holder | Ready | [Click Here](https://tinyurl.com/y5s3yfkg) |
| Dummy API | Ready | [Click Here](https://tinyurl.com/y5a6dew8) |
| UI Faces | Ready | [Click Here](https://tinyurl.com/y4cv59qy) |
| Pokemon | Coming Soon | [Click Here]() |
| Star Wars | Ready | [Click Here](https://swapi.dev/) |
| Marvel | Coming Soon | [Click Here]() |
| Harry Potter | Coming Soon | [Click Here]() |
| IMDB | Coming Soon | [Click Here]() |
| The Cat | Coming Soon | [Click Here]() |
| Anime | Coming Soon | [Click Here]() |
| Ricky And Morty | Coming Soon | [Click Here]() |
| Unsplash | Coming Soon | [Click Here]() |
| Listen Notes | Coming Soon | [Click Here]() |
### TRANSLATION
- [Indonesian](https://github.com/restuwahyu13/react-fakers/blob/main/README_ID.md)
- [English](https://github.com/restuwahyu13/react-fakers/blob/main/README.md)
### NOTES
- For `Provider` that uses `API KEY` if you have a limit, please visit the `API` provider service, to get your own `API KEY`
- For more information on the `API` available, you can visit the official documentation of each `Provider`
- To find out more about using this tool, you can open the `app-dev/src/examples` in this repository
### CONTRIBUTING
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)
### BUGS
For information on bugs related to package libraries, please visit [here](https://github.com/restuwahyu13/react-fakers/issues)
### AUTHOR
- [Restu Wahyu Saputra](https://github.com/restuwahyu13)
### LICENSE
- [MIT](https://github.com/restuwahyu13/react-fakers/blob/main/LICENSE.md)