chayns-hooks

chayns-hooks

A collection of React hooks for chayns® developers.

Documentation • Development • Contribute

chayns-hooks packs some of the functionality of the chayns-js library as React hooks for easier use in React components.

Contrary to chayns-js, this library is also fully typed.

❯ Documentation

• useAdminMode
• useChaynsUser
• useVisibilityEffect

useAdminMode

Returns wether the user is currently in admin mode, aswell as methods to toggle the admin mode from your application code.

By default any iframe on a page will be reloaded when the admin mode value switches. This hook will register a chayns.addAdminSwitchListener, which will prevent the default behavior. You will get the updated value in the isAdminMode field and your page will not reload.

Example

const { isAdminMode, activateAdminMode, deactivateAdminMode } = useAdminMode();

Return values

• isAdminMode: boolean

  Wether the user is currently in admin mode.

• activateAdminMode: () => void

  A function to activate admin mode. You will receive the updated value in isAdminMode.

• deactivateAdminMode: () => void

  A function to deactivate admin mode. You will receive the updated value in isAdminMode.

useChaynsUser

Returns the user object of the currently logged in user and subscribes to any changes to it, including logging in or out.

By default any iframe on a page will be reloaded when a user logs in or out. This hook will register a chayns.addAccessTokenChangeListener, which will prevent the default behavior. You will get the updated value in the user field and your page will not reload.

Example

const user = useChaynsUser();

Return value

• user

  The user object of the currently logged in user.

useVisibilityEffect

This hook allows you to run any side-effect when the visibility of the page changes. Use it similar to a useEffect, but without a dependency array.

Example

useVisibilityEffect((isShown: boolean) => {
  console.log(`The page is now ${isShown ? "shown" : "hidden"}`);
});

Callback arguments

• isShown

  Indicates wether the page is now hidden (false) or shown (true).

❯ Development

For developing you have to link the project to a React application using yarn link.

Releasing a new version on NPM

To release a new version on npm, run npm version (patch|minor|major) to increase the version. This will create a Git tag for you.

Push this Git tag to GitHub and a GitHub Action will publish the package for you.

❯ Contribute

If you think you have any ideas that could benefit the project, feel free to create an issue or pull request!

_{Project by Leo Driesch, released under MIT license.}