@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 intialValueconst [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 stateconst [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 usefulconst [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'
1.0.6v
useScroll
Infinite Scroll with Intersection Observer API
It's simple way to implement Infinite Scrollimport { 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 Moreimport { 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