@eteg/react-hooks

React Hooks

This is a collection of React hooks built for Zendesk using ZAF Client API.

📋 Table of contents

• Installation
• Usage
• Deploy
• License

📦 Installation

You just need to add using PNPM pnpm add @eteg/react-hooks in your Zendesk project.

🚀 Usage

You can follow the examples bellow to use inside your code

useClientGet(path)

Gets data asynchronously for a given path. Uses client.get under the hood.

Arguments:

• path: string

Example:

useClientGet('ticket.subject')

Returns:

{
  data: { ticket.subject: 'Help, my printer is on fire' },
  error: null,
  feedback: { status: 'success' }
}

useClientHeight(height)

Changes an app height. Calls resize action under the hood.

Arguments:

• height: number - specifies a height for an app in px

Example:

useClientHeight(300)

useClientInvoke(name, ...options)

Executes an action identified by the name path parameter. Use client.invoke under the hood.

Arguments:

• name: string - the path to call
• options: object (optional) - arguments to be passed to the call

Example:

useClientInvoke('appsTray.show')

Returns:

{
  data: {
    "appsTray.show": {
    "isVisible": true
    }
  },
  error: null,
  feedback: { status: 'success' }
}

useClientRequest(url, options, dependencies, cacheKey)

Dispatches network requests via the Zendesk Apps framework. Uses client.request under the hood.

Arguments:

• url: string - the url of the resource to request
• options: object - additional parameters send with the request
• dependencies: array (optional) - prevents by making a request if a dependency is not met and limits the request execution so that the request is made only if a dependency value changes
• cacheKey: string (optional) - an unique string value that request should be cached for

Example:

const { data, feedback, error, refetch } = useClientRequest(
  '/api/v2/tickets.json',
  {
    data: { keyExample: 'Value Example' },
    dataType: 'json',
    contentType: 'application/json',
    method: 'POST'
  },
  [],
)

Returns:

{
  data: { keyExample: [] },
  error: null,
  feedback: { status: 'success' }
}

useClientRequestWithAuth(url, options, dependencies, cacheKey)

Uses useClientRequest under the hood, but additionally passes extra parameters which are required to make authenticated requests:

const defaultOptions = {
    dataType: 'json',
    contentType: 'application/json',
    method: 'GET'
}

const options = {
  secure: true,
  headers: {authorization: 'Bearer {{setting.access_token}}'},
  ...defaultOptions,
}

Example:

useClientRequestWithAuth(
  '/api/tickets.json',
  options,
  [],
)

Returns:

{
  data: { keyExample: [] },
  error: null,
  feedback: { status: 'success' }
}

🏗 Deploy

You can build hooks using pnpm build:modern

and

pnpm pub to push your cod to NPM

Before you push your code to GIT and NPM, make sure you bump the version in package.json. This process is necessary to ensure that the package is published with the correct version.

This is a temporary solution, and will be replaced with a more robust solution in the future. (Automatic Bump Version)

📜 License

This project have no license. You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. Github licensing page.