💪 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

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