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