1.1.1 • Published 3 years ago
@cooksmelon/event v1.1.1
@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
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()
const [text, onText, setText] = useInput(0);
<input
type="number"
onChange={onText}
name="email"
placeholder="email" />
console.log(text);
// value
setText(0)
// 0
useToggle()
const [toggle, onClick] = useToggle(false);
<button onClick={onClick} type="button">toggle</button>
console.log(toggle);
// ex) false ? true : false
useFind()
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}
const [findId, onFindId] = useFindId();
<div data-id="dwqd" onClick={onFind}></div>
console.log(find);
// 'dwqd'
1.0.6v
useScroll
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
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
import { useScrollTop } from "@cooksmelon/event"
const PageComponents = () => {
useScrollTop()
return ( ...)
}
it is automatically scroll to top