Skip to content

React-Fakers is a collection of dummy data for application development testing

License

Notifications You must be signed in to change notification settings

restuwahyu13/react-fakers

Repository files navigation

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.

Build Status npm version npm bundle size npm bundle size (version) Snyk Vulnerabilities for GitHub Repo npm Open Source Helpers PRs Welcome

logo

TABLE OF CONTENT

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

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

LICENSE

BACK TO TOP