eddieyg / reach-somewhere

Easily monitor content (scroll) to reach a certain position, in vue react framework.

Reach Somewhere

Easily monitor content (scroll) to reach a certain position, in vue react framework.

✨ Features

• Listen for the roll arrival position
• Support for multiple listening
• vue react hook and directive available

👨‍💻 Usage

Install

pnpm add reach-somewhere

Use of Vue

Directive

import { createApp } from 'vue'
import { ReachSwDirective } from 'reach-somewhere/vue'
const app = createApp(App)

// install ReachSwDirective
app.use(
  ReachSwDirective,
  {
    name: 'reach-sw', // customize directive name, default 'reach-sw'
  }
)

app.mount('#app')

<template>
  <div v-reach-sw="reachSwParams">
    ...
  </div>
</template>

<script setup lang="ts">
  const reachTop = {
    position: 'top 0px',
    debounceMs: 100,
    onReach: () => {},
    onLeave: () => {},
  }
  const reachBottom = {
    position: 'bottom 0px',
    debounceMs: 100,
    onReach: () => {},
  }
  const reachSwParams = [
    reachTop,
    reachBottom,
  ]
</script>

Hook

<template>
  <div ref="elRef">
    ...
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useReachSw } from 'reach-somewhere/vue'

  const elRef = ref<HTMLElement>()
  const reachSwParams = {
    position: 'bottom 0px',
    debounceMs: 100,
    onReach: () => {},
  }
  const reachSw = useReachSw(elRef, reachSwParams, { auto: true })
  // reachSw.listen()
  // reachSw.rmListen()
</script>

Use of React

Hook

import { useRef } from 'react'
import { useReachSw } from 'reach-somewhere/react'

function MyComponent() {
  const elRef = useRef(null)
  const reachSwParams = {
    position: 'bottom 0px',
    debounceMs: 100,
    onReach: () => {},
  }
  const reachSw = useReachSw(elRef, reachSwParams, { auto: true })
  // reachSw.listen()
  // reachSw.rmListen()

  return <div ref={elRef}>...</div>
}

License

Licensed under the MIT License.

reach-somewhere's Issues

Possible supported

features

• Reach the start-to-end range

  const reachSwParams = {
    direction: 'top',  // or 'bottom'
    start: '10px',
    end: '60px'
    debounceMs: 100,
    onReach: () => {},
    onLeave: () => {},
  }

• Reaches a target

 const target = document.querySelector('#box')
  const reachSwParams = {
    direction: 'top',  // or 'bottom'
    target,  // or '#box'
    debounceMs: 100,
    onReach: () => {},
    onLeave: () => {},
  }

docs

• online demo
• doc site
• types (like https://typedoc.org/)