https://github.com/jsdeveloperr/vue3-use-hooks

Vue Use Hooks implemented as vue composition functions 💥
https://github.com/jsdeveloperr/vue3-use-hooks

hooks typescript vue vue-hook vue-hooks vue-next vue-use vue-use-hooks vue3 vue3-composition-api vue3-hooks vue3-typescript vuejs vuejs3

Last synced: 8 days ago
JSON representation

Vue Use Hooks implemented as vue composition functions 💥

• Host: GitHub
• URL: https://github.com/jsdeveloperr/vue3-use-hooks
• Owner: jsdeveloperr
• Created: 2022-07-16T14:39:45.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-28T20:12:07.000Z (over 2 years ago)
• Last Synced: 2024-11-15T08:43:34.868Z (about 1 month ago)
• Topics: hooks, typescript, vue, vue-hook, vue-hooks, vue-next, vue-use, vue-use-hooks, vue3, vue3-composition-api, vue3-hooks, vue3-typescript, vuejs, vuejs3
• Language: Vue
• Homepage: https://vue3-use-hooks.vercel.app
• Size: 174 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# :boom: Vue3 Use Hooks

> 
Reusability and Composition functions.




[![npm](https://img.shields.io/npm/v/vue3-use-hooks?style=flat-square)](https://www.npmjs.com/package/vue3-use-hooks)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue3-use-hooks?style=flat-square)

![npm](https://img.shields.io/npm/dt/vue3-use-hooks?style=flat-square)

![GitHub license](https://img.shields.io/npm/l/vue3-use-hooks?style=flat-square)



## :books: Introduction

Vue Use Hooks implemented as vue composition functions.

## :rocket: Example

Check our 👉 [example](https://vue3-use-hooks.vercel.app/)

## :package: Installation

```bash

# install with yarn

yarn add vue3-use-hooks

# install with npm

npm install vue3-use-hooks

# install with pnpm 

pnpm add vue3-use-hooks

```

## :sparkles: useLocalStorage

```vue

import { useLocalStorage } from 'vue3-use-hooks';

const { value, remove } = useLocalStorage('test', '1');

  


    
Value is:  {{ value }}

    Change

    Remove

  


```

## :sparkles: useState

```vue

import { useState } from 'vue3-use-hooks';

const [count, setCount] = useState(0);

  


    
Count:  {{ count }}

    = 0 && setCount(count - 1)">Decrement

    Increment

  


```

## :sparkles: useStringCase

```vue

import { reactive } from 'vue';

import { useStringCase } from 'vue3-use-hooks';

const state = reactive({

  name: 'imelda white',

  gender: 'female',

  company: 'NEUROCELL',

  email: '[email protected]',

  balance: '3,814.49',

  about: 'Veniam fugiat pariatur adipisicing do consequat.',

  address: 'bulwer place, lemoyne, district of columbia, 5597'

});

const { camelCase, kebabCase, pascalCase, upperCase, lowerCase, sentenceCase, capitalizeCase } =

  useStringCase();

  


    
CamelCase: {{ camelCase(state.about) }}

    
CapitalizeCase: {{ capitalizeCase(state.name) }}

    
SentenceCase: {{ sentenceCase(state.company) }}

    
KebabCase: {{ kebabCase(state.balance) }}

    
PascalCase: {{ pascalCase(state.address) }}

    
LowerCase: {{ lowerCase(state.email) }}

    
UpperCase: {{ upperCase(state.gender) }}

  


```

## :sparkles: useEmbed

```vue

import { ref } from 'vue';

import { useEmbed } from 'vue3-use-hooks';

const code = ref(null);

const { isEmbedBlock, clear } = useEmbed(code);

  


    


      

      Clear

    

    


  


```

## :sparkles: useModal

```vue

import { useModal } from 'vue3-use-hooks';

const contrubitors = [

  {

    id: 1,

    emoji: '👨',

    fullname: 'Abdulnasır Olcan',

    programmer: 'Frontend Developer'

  },

  {

    id: 2,

    emoji: '👩',

    fullname: 'Büşra Şanlıbayrak',

    programmer: 'Frontend Developer'

  },

  {

    id: 3,

    emoji: '🧑‍',

    fullname: 'Mehmet Varol',

    programmer: 'Frontend Developer'

  }

];

const { visible, setVisible, current, openModal, closeModal } = useModal();

const handleButton = () => {

  openModal(contrubitors);

  setVisible(true);

};

  


    

    show model


    

    


    

    


      
Modal Header

      x

      


        


          


            
{{ contrubitor.emoji }}

            
{{ contrubitor.fullname }}

            {{ contrubitor.programmer }}

          

        

      

      
Modal Footer

    

  


```

## 📄 License



    🍁 MIT Licensed | Copyright © 2022-present Abdulnasır Olcan and @Vue3UseHooks contributors