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.

• useAdminMode
• useChaynsUser
• useVisibilityEffect

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.

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

• 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.

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.

const user = useChaynsUser();

• user

  The user object of the currently logged in user.

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.

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

• isShown

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

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

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.

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.}