Package Exports

@croffasia/vue3-custom-hooks

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@croffasia/vue3-custom-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

💪 Vue3 Custom Hooks

Build custom hooks for Vue3 Composition API

Install

yarn add @croffasia/vue3-custom-hooks

npm install @croffasia/vue3-custom-hooks --save

Buy me a burger 🍔

BTC: 3QRaAVBCmySMSRDRnbH86sFVLNDWtiCHFf

ETH, TUSD, USDC: 0xA0b1ceCB9e785d920D7B0d4847F34551Ab38496B

Binance Coin BNB: bnb1lrst8vak0vtj3synzn9dkuphund8mt0es5xyxc

Apple Pay or Google Pay - Scan to pay

alt text

Usage

After installing Vue3 Custom Hooks, let's create some hooks.

// @/hooks/login.js
import useHooks from '@croffasia/vue3-custom-hooks';

const LOGIN = 'login';
const LOGOUT = 'logout';

const hooks = useHooks(LOGIN, LOGOUT);

export const onLogin = hooks.makeHook(LOGIN);
export const onLogout = hooks.makeHook(LOGOUT);

// hooks.available() - returned all about available hooks.
// hooks.available("login") - returned info about hook test
// hooks.clear() - clear all callbacks
// hooks.clear("login") - clear all callbacks from hook login

export default hooks;

Now, you can use your hooks

// use hooks

import {onLogin, onLogout} from '@/hooks/login';

export default {
    setup() {
        const logout = onLogout(() => {
            console.log('Login hook');

            // Remove listener
            logout.destroy();
        });

        onLogin(({user}) => {
            console.log(`Hello ${user}`);

            // Dispatch logout
            logout.dispatch();
        });
    },
};

// Example of auth logic component
// composables/useAuth.js

import { onLogin, onLogout } from '@/hooks/login'

export default () => {

    const Login () => {
        // Dispatch login hook with payload
        onLogin({ user: "UserName" });
    }

    const Logout () => {
        // Dispatch logout hook without payload
        onLogout();
    }

    return {
        Login,
        Logout,
    }
}