open-index/open-npm huggingface dataset:
npm package: @jherrerat/react-typing-animation
Description: Ract typing animation Library
Author: JMHerreraT
Latest version: 1.0.0

# react-typing-animation

> Ract typing animation Library

[![NPM](https://img.shields.io/npm/v/react-typing-animation.svg)](https://www.npmjs.com/package/react-typing-animation) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-typing-animation
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'react-typing-animation'
import 'react-typing-animation/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [JMHerreraT](https://github.com/JMHerreraT)
npm package: @jhersbo/usefunhooks
Description: A collection of custom hooks that I've made over the years.
Author: Jack Ersbo
Latest version: 1.0.6

# @jhersbo/useFunHooks

![npm (scoped)](https://img.shields.io/npm/v/@jhersbo/usefunhooks)

____
## About ##
This package is (or will be) a collection of custom React.js hooks that I have created for niche purposes over the years. Before publishing, I will attempt to give them a higher level of abstraction, but they are predominantly wacky, fun hooks for niche purposes. The [repo](https://github.com/jhersbo/useFunHooks) is open source. Feel free to submit contributions. Enjoy!
____
## Installation ##
```bash
npm i @jhersbo/usefunhooks
```
___
## Hooks ##
>useFollowPointer
```javascript
const point = useFollowPointer(ref)
```
When passed an HTML `ref`, it will return the cursor's window position as `{x: number, y: number}`. It will consider scroll distance during this process. Its usecase has been enabling the user to click and drag elements within the window. Typically, this will be done by storing the `clicked` state in a React state variable, thus toggling the element's `position` reference between either a static reference (element snaps back when unclicked), or a React ref object (element stays put when unclicked).
### Usage ###
```JSX
function App(){
    return(
        <div>
            <MoveableElement/>
        </div>
    )
}

function MoveableElement({props, children}){
    
    const divRef = useRef()
    const point = useFollowPointer(divRef)
    // can initialize prevPoint as either undefined or the element's 
    // starting coordinates
    let prevPoint = useRef()

    let [ clicked, setClicked ] = useState(false)

    function handleClick(){
        prevPoint.current = point
        setClicked(!clicked)
    }

    return(
        <div
            ref={divRef} 
            style={{
                position: clicked ? point : prevPostion
            }}
            onClick={()=>{
                handleClick()
            }}
        >
            {children}
        </div>
    )
}
```