react-fakers v1.0.3-rc1

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

• COMPONENTS

API STATUS

API LIST

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