Skip to content
This repository has been archived by the owner on Jun 29, 2022. It is now read-only.
/ chayns-hooks Public archive

Makes the chayns-js API easier to consume in your react components.

License

Notifications You must be signed in to change notification settings

leodr/chayns-hooks

Repository files navigation

chayns-hooks

A collection of React hooks for chayns® developers.

MIT License David Open GitHub issues

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.

Preview of the API


❯ Documentation


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.

Leo Driesch on Twitter    Leo Driesch on GitHub