CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

useTypeAHead

Description#

The useTypeAHead is a hook that is used with the component FormField type "typeAHead" to handle the api call.

Installation#

Code Example

npm i @codecraftkit/usetypeahead

Import#

it can be imported from hooks.

Code Example

import { useTypeAHead } from "@codecraftkit/hooks";

or alone.

Code Example

import { useTypeAHead } from "@codecraftkit/usetypeahead";

Usage#

This hook allows you to get the data and send it to the TypeAHead from Comet, api or graphql

Go to Type A Head Component page...

Code Example

//useTypeAHead examples
  // comet
 const [getUsers, loadingUsers, setLoadingUsers] =
   useTypeAHead({path: 'users.list})

  //gql
 const [getUsers, loadingUsers, setLoadingUsers] =
   useTypeAHead({QUERY: P_USER,collection: 'P_User',})

  //Component type A Head
  <FormField
    type='typeAHead'
    name='userId'
    label='Description'
    loading={loadingUsers}
    handleLoading={setLoadingUsers}
    typeAHeadSearch={getUsers}
    withButton
  />

Another Example#

Code Example

const [getUsers, loadingUsers, setLoadingUsers] =
useTypeAHead({
  QUERY: P_USER,
  collection: 'P_User',
  customSend:(search, itemId)=>{
    return {
      search: itemId || search
    }
  },
  customGet:(res)=> {
    return res.data[collection].items
  }
})

Arguments#

name

type

required

default

description

path

String

no, unless you are using Comet or an api

The path where the TypeAHead will get the data

field

String

In the response the name of the object that contains the array, not pass this argument if the array is in the response root

QUERY

Graphql Query

The Query where to get the data using gql

collection

String

The name of the collection

getAllCometData

Boolean

return all response data

customSend

Function

Function that receive the search and itemId and returns the object to send through params

customGet

Function

Function that receive the response and returns in it inside the get call

queryOptions

Object

Options that can be customize in the useQuery hook in Query

Results#

name

type

description

get

Function

Function that return the response data

boolean

Api call loading

setLoading

setState

Handle loading state

error

String

Response Error