🦄 Usage in Vue Composition API

<script>
import { usePick } from '@vruse/vue'
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const r = ref<number>(0)
    const { run, pickedList } = usePick([1, 2, 3, 6, 7, 8, 9, 10], {
      pickCount: 5,
      excludes: 1,
    }, (v) => {
      r.value = v
    })

    onMounted(() => {
      run()
    })

    return {
      r,
      pickedList
    }
  }
}
</script>

<template>
  <div>{{ pickedList }}</div>
  <div>{{ r }}</div>
</template>

🦄 Usage in React (version > 16.8)

import { usePick } from '@vruse/react'
import React, { useEffect, useState } from 'react'

function App() {
  const [r, setR] = useState(0)

  const { run, pickedList } = usePick(
    [1, 2, 3, 6, 7, 8, 9, 10],
    {
      pickCount: 5,
    },
    (v) => {
      setR(v)
    },
  )

  useEffect(() => {
    run()
  }, [])

  return (
    <>
      <div>{pickedList}</div>
      <div>{r}</div>
    </>
  )
}
export default App

📦 安装

🎩 From v4.0, it works for Vue & React 18 within a single package by the power of vue-demi!

Vue 项目：

npm i @vruse/vue

React 项目：

npm i @vruse/react

Add ons | Nuxt Module

From v6.0, vruse requires vue >= v3.2 or @vue/composition-api >= v1.1
From v6.0, vruse requires react >= v16.8

Demos

• Vite + Vue
• Webpack + Vue
• vite + React18
• webpack + React18

CDN

It will be exposed to global as window.VRuse

🪴 Project Activity