https://github.com/nooooooom/vue-forward-ref

💫 Make it easier for HOCs to forward refs
https://github.com/nooooooom/vue-forward-ref

forward-ref hoc vue

Last synced: about 1 month ago
JSON representation

💫 Make it easier for HOCs to forward refs

• Host: GitHub
• URL: https://github.com/nooooooom/vue-forward-ref
• Owner: nooooooom
• License: mit
• Created: 2023-02-03T17:40:12.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-12T12:43:10.000Z (about 1 year ago)
• Last Synced: 2024-11-01T12:36:50.655Z (about 2 months ago)
• Topics: forward-ref, hoc, vue
• Language: TypeScript
• Homepage: https://npmjs.com/package/vue-forward-ref
• Size: 85.9 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-forward-ref



💫 Make it easier for HOCs to forward refs.

## Installation

```bash

pnpm install vue-forward-ref

```

## Usage

`vue-forward-ref` provides two forwarding methods.

The easiest is to use `forwardRef` to wrap the component you need to forward.

```js

import { forwardRef } from 'vue-forward-ref'

defineComponent({

  name: 'Wrapper',

  setup() {

    return () => {

      // The component can be any type used to create a vnode

      // - string

      // - Component

      // - ConcreteComponent

      return forwardRef('div')

    }

  }

})

```

If you need to extend or override the forward, you can use `createForwardRef`.

```js

import { createForwardRef } from 'vue-forward-ref'

defineComponent({

  name: 'Wrapper',

  setup() {

    const override = {

      // ...

    }

    // Assign `forwardRef` to the component that needs to be forwarded,

    // and the first parameter allows you to pass in the ref already defined

    const forwardRef = createForwardRef(null, override)

    return () => {

      return h(Component, {

        ref: forwardRef

      })

    }

  }

})

```

Either way, they allow you to customize which component the declaration is forwarded on.

```js

forwardRef(Component, instance)

// or

createForwardRef(null, null, instance)

```

## License

[MIT](./LICENSE)