@cooksmelon/event

Install

$npm i @cooksmelon/event
$yarn add @cooksmelon/event

Using

import { useFindId, useFind, useFormInput, useInput, useToggle } from "@cooksmelon/event";
import { useMore, useScroll, useScrollTop } from "@cooksmelon/event";

useFormInput

Only Form or Input Event

const [form, onChange, setForm] = useFormInput();

// if wanna reset
const onReset = () => {
        setForm({});
    };

<form onChange={onChange}>
    <input type="text" name="email" placeholder="email" />
    <input
        type="password"
        name="password"
        placeholder="password" />
    <button type="reset" onClick={onReset}>
            reset
    </button>
</form>

console.log(form);
// {email : value, password : value}
setForm({})
// reset value

if you wannabe setup initialValue you have to use UseEffect

useEffect(() => {
    setForm({email: "", password: ""})
}, [])

useInput()

Only Input Change Event

You have to be set intialValue

const [text, onText, setText] = useInput(0);

<input
    type="number"
    onChange={onText}
    name="email"
    placeholder="email" />

console.log(text);
// value
setText(0)
// 0

useToggle()

Toggle handler

It's the best simple way to change state

const [toggle, onClick] = useToggle(false);

<button onClick={onClick} type="button">toggle</button>

console.log(toggle);
// ex) false ? true : false

useFind()

Find dataset

If you set up a dataset(HTML) will be useful

const [find, onFind] = useFind();

 <div data-value="value" data-id="id" data-day="mon" onClick={onFind}></div>

 console.log(find);
 // DOMStringMap {value: "value", id: "id", day: "mon", constructor: Object}

You can access the DOMStringMap and extract and use the data if necessary.

If you set up a dataset-id, you can use useFindId.

const [findId, onFindId] = useFindId();

 <div data-id="dwqd" onClick={onFind}></div>

 console.log(find);
 // 'dwqd'

Total Example

---

1.0.6v

useScroll

Infinite Scroll with Intersection Observer API

It's simple way to implement Infinite Scroll

Example

import { useScroll } from "@cooksmelon/event";
import faker from "faker";

const createBoard = () => {
    return {
      title: faker.lorem.word(),
      content: faker.lorem.sentences()
    };
};
const [boards, setBoards] = useState([]);

const viewPort = useRef(null);
const data = {
    viewPort: viewPort.current,
    length: boards.length,
    initial: 10,
    count: 20,
    limit: 110
  };

const [lastElement, display] = useScroll(data);

useEffect(() => {
    setBoards(Array(display).fill(undefined).map(createBoard));
}, [display]);

<div ref={viewPort}>
    {boards.map((b, index) => (
        <div ref={boards.length === index + 1 ? lastElement : null}>
        <h1>{b.title}</h1>
        <p>{b.content}</p>
        </div>
    ))}
</div>

Props

*viewPort : ViewPort is wrapper
*length : Current length of data.
*initial : InitialNumber
*count : InitialNumber + count
*limit: It is limit
query : Reset when query changes
isLoading : Will not scroll when loading

useMore

More Click Button

View More

Example

import { useFind, useMore } from "@cooksmelon/event";
import faker from "faker";
;

const createBoard = () => {
    return {
        title: faker.random.word(),
        content: faker.lorem.sentences(),
        id: faker.random.uuid()
    };
};

const [onMore, display] = useMore({
    length: 20,
    initial: 5,
    count: 5,
    limit: 20
});

const boards = Array(display).fill(undefined).map(createBoard);

console.log(find);

<div className="App">
    {boards.map((b) => (
        <div>
          <h2>{b.title}</h2>
          <p>{b.content}</p>
        </div>
      ))}
      <div onClick={onMore}> more</div>
</div>

Props

*length : Current length of data.
*initial : InitialNumber
*count : InitialNumber + count
*limit: It is limit
query : Reset when query changes
isLoading : Will not scroll when loading

---

1.1.0v

useScrollTop

When first render, scroll top

import { useScrollTop } from "@cooksmelon/event"

const PageComponents = () => {
    useScrollTop()

    return ( ...)
}

it is automatically scroll to top