@croffasia/vue3-custom-hooks

    0.3.1 • Public • Published

    💪 Vue3 Custom Hooks

    npm npm npm Coverage Status npm

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

    Install

    npm i @croffasia/vue3-custom-hooks

    DownloadsWeekly Downloads

    7

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • croffasiapersonal