README_ID.md

React Fakers

React Fakers adalah kumpulan dummy data dari berbagai sumber layanan penyedia dummy data terpopuler seperti Json Place Holder, Faker, Pokemon dll, untuk keperluan testing pengembangan aplikasi.

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 [state, setState] = useState(false)
    const { success, error } = useFaker()
  
    useEffect(() => {
      if (success) {
        setState(true)
      }
    }, [])
  
    if (error) {
      alert(error.message)
    }
  
    return (
      <>
        {!state && <h4>Loading....</h4>}
        {state &&
          success.map((val, id) => (
            <ul key={val.uuid}>
              <li>
                {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 [state, setState] = useState(false)
    const { success, error } = useFaker({
      type: 'addresses',
      params: { addresses: { quantity: 5 } }
    })
  
    useEffect(() => {
      if (success) {
        setState(true)
      }
    }, [])
  
    if (error) {
      alert(error.message)
    }
  
    return (
      <>
        {!state && <h4>Loading....</h4>}
        {state &&
          success.map((val, id) => (
            <ul key={val.uuid}>
              <li>
                {val.street} - {val.streetName} - {val.zipcode}
              </li>
            </ul>
          ))}
      </>
    )
  }
  
  export default App

  • useJsonPlaceHolder

  import React, { useState, useEffect } from 'react'
  import { useJsonPlaceHolder } from 'react-fakers'
  
  const App = () => {
    const [state, setState] = useState(false)
    const { success, error } = useJsonPlaceHolder()
  
    useEffect(() => {
      if (success) {
        setState(true)
      }
    }, [])
  
    if (error) {
      alert(error.message)
    }
  
    return (
      <>
        {!state && <h4>Loading....</h4>}
        {state &&
          success.map((val, id) => (
            <ul key={id}>
              <li>
                {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 [state, setState] = useState(false)
    const { success, error } = useJsonPlaceHolder({
      type: 'posts',
      params: {
        userId: 1
      },
      options: { limit: 3 }
    })
  
    useEffect(() => {
      if (success) {
        setState(true)
      }
    }, [])
  
    if (error) {
      alert(error.message)
    }
  
    return (
      <>
        {!state && <h4>Loading....</h4>}
        {state &&
          success.map((val, id) => (
            <ul key={id}>
              <li>
                {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>}
          {this.state.loading &&
            this.state.data.map((val, id) => (
              <ul key={val.uuid}>
                <li>
                  {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>}
          {this.state.loading &&
            this.state.data.map((val, id) => (
              <ul key={val.uuid}>
                <li>
                  {val.street} - {val.streetName} - {val.zipcode}
                </li>
              </ul>
            ))}
        </>
      )
    }
  }
  
  export default App

  • JsonPlaceHolder

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

  • JsonPlaceHolder 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 (
        <>
          <JsonPlaceHolder
            success={this.onSuccess}
            error={this.onError}
            type='posts'
            params={{ userId: 1 }}
            options={{ limit: 3 }}
          />
  
          {!this.state.loading && <h4>Loading....</h4>}
          {this.state.loading &&
            this.state.data.map((val, id) => (
              <ul key={id}>
                <li>
                  {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	Untuk menampilkan dummy data dari Faker API
	params	object	optional	{ }
useJsonPlaceHolder	type	string	optional	users	Untuk menampilkan dummy data dari Json Place Holder API
	params	object	optional	{ }
	options	object	optional	{ limit: 0 }
	filters	object	optional	{ }
useDummy	type	object	optional	user	Untuk menampilkan dummy data dari 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	Untuk menampilkan dummy data dari UI Faces API
	params	object	optional	{ limit: 10 }

• COMPONENTS

Name	Property	Type Data	Optional/Required	Default Value	Description
Faker	success	function	required		Untuk menampilkan dummy data dari Faker API
	error	function	optional
	type	string	optional	users
	params	object	optional
JsonPlaceHolder	success	function	required		Untuk menampilkan dummy data dari Json Place Holder API
	error	function	optional
	type	string	optional	users
	options	object	optional	{ limit: 0 }
	filters	object	optional	{ }
Dummy	success	function	required		Untuk menampilkan dummy data dari Dummy API
	error	function	optional
	apiKey	string	optional	5faa1fab5317ae96860c0be3
	params	object	optional	{ }
	options	object	optional	{ limit: 0 }
	filters	object	optional	{ }
UIFaces	success	function	required		Untuk menampilkan dummy data dari 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

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	Comingsoon	Click Here
Star Wars	Comingsoon	Click Here
Marvel	Comingsoon	Click Here
Harry Potter	Comingsoon	Click Here
IMDB	Comingsoon	Click Here
The Cat	Comingsoon	Click Here
Anime	Comingsoon	Click Here
Ricky And Morty	Comingsoon	Click Here
Unsplash	Comingsoon	Click Here
Listen Notes	Comingsoon	Click Here

TRANSLATION

• Indonesian
• English

NOTES

• Untuk Dummy Data yang menggunakan API KEY jika anda mengalami limit, silahkan anda kunjungi ke layanan penyedia API terkait, untuk mendapatkan kunci API KEY anda sendiri
• Untuk informasi lebih lanjut terkait API yang tersedia, anda bisa mengunjungi dokumentasi resminya dari masing - masing Provider
• Untuk cara penggunaan lebih lanjut anda bisa membuka folder app-dev/src/examples di repository ini

CONTRIBUTING

Ingin membuat React Fakers lebih sempurna? Mari berkontribusi dan ikuti panduan kontribusi.

BUGS

Untuk informasi mengenai bugs terkait package library silakan klik disini

AUTHOR

• Restu Wahyu Saputra

LICENSE

• MIT

BACK TO TOP