Neverending Perpetual Motion

    chayns-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    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

    Install

    npm i chayns-hooks

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    36.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar