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.

TABLE OF CONTENT

• Get Started
  • Installation
  • Example Usage
  • API Reference
  • API Status
  • API List
  • Translation
  • Notes
  • Contributing
  • Bugs
  • Author
  • License

INSTALLATION

npm i react-fakers | yarn add react-fakers

EXAMPLE USAGE

• Hooks

  • useFaker

  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 && <h4>Loading....</h4>}
        <ul>
          {loading &&
            success.map((val, id) => (
              <li key={val.uuid}>
                {val.firstname} {val.lastname} - {val.email}
              </li>
            ))}
        </ul>
      </>
    )
  }
  
  export default App

  • useFaker With Params

  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 && <h4>Loading....</h4>}
         <ul>
          {loading &&
            success.map((val, id) => (
              <li key={val.uuid}>
                {val.firstname} {val.lastname} - {val.email}
              </li>
            ))}
        </ul>
      </>
    )
  }
  
  export default App

  • useJsonPlaceHolder

  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 && <h4>Loading....</h4>}
         <ul>
          {loading &&
            success.map((val, id) => (
              <li key={id}>
                {val.name} - {val.email}
              </li>
            ))}
        </ul>
      </>
    )
  }
  
  export default App

  • useJsonPlaceHolder With Params

  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 && <h4>Loading....</h4>}
         <ul>
          {loading &&
            success.map((val, id) => (
              <li key={id}>
                {val.id} - {val.title}
              </li>
            ))}
        </ul>
      </>
    )
  }
  
  export default App

• Components

  • Faker

  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 (
        <>
          <Faker success={this.onSuccess} error={this.onError} />
  
           {!this.state.loading && <h4>Loading....</h4>}
            <ul>
              {this.state.loading &&
                this.state.data.map((val, id) => (
                  <li key={val.uuid}>
                    {val.firstname} {val.lastname} - {val.email}
                  </li>
                ))}
           </ul>
        </>
      )
    }
  }
  
  export default App

  • Faker With Params

  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 (
        <>
          <Faker
            success={this.onSuccess}
            error={this.onError}
            type='addresses'
            params={{ addresses: { quantity: 5 } }}
          />
  
          {!this.state.loading && <h4>Loading....</h4>}
          <ul>
            {this.state.loading &&
              this.state.data.map((val, id) => (
                <li key={val.uuid}>
                  {val.street} - {val.streetName} - {val.zipcode}
                </li>
              ))}
          </ul>
        </>
      )
    }
  }
  
  export default App

  • JsonPlaceHolder

  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 (
        <>
          <JsonPlaceHolder success={this.onSuccess} error={this.onError} />
  
          {!this.state.loading && <h4>Loading....</h4>}
          <ul>
            {this.state.loading &&
              this.state.data.map((val, id) => (
                <li key={id}>
                  {val.name} - {val.email}
                </li>
              ))}
          </ul> 
        </>
      )
    }
  }
  
  export default App

  • JsonPlaceHolder With Params

  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 (
        <>
          <JsonPlaceHolder
            success={this.onSuccess}
            error={this.onError}
            type='posts'
            params = {{ posts: { userId: 1 } }},
            options={{ limit: 3 }}
          />
  
          {!this.state.loading && <h4>Loading....</h4>}
          <ul>
            {this.state.loading &&
              this.state.data.map((val, id) => (
                <li key={val.uuid}>
                  {val.id} - {val.title}
                </li>
              ))}
          </ul>
        </>
      )
    }
  }
  
  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
Json Place Holder	Ready	Click Here
Dummy API	Ready	Click Here
UI Faces	Ready	Click Here
Pokemon	Coming Soon	Click Here
Star Wars	Ready	Click Here
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
• English

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.

BUGS

For information on bugs related to package libraries, please visit here

AUTHOR

• Restu Wahyu Saputra

LICENSE

• MIT

BACK TO TOP