nomadcoders reack hooks
프리셋을 클릭 후 생성하고 저장하면 fork됨
import React, { useState } from "react";
import { render } from "react-dom";
const App = () => {
const [item, setItem] = useState(1);
const incrementItem = () => setItem(item + 1);
const decrementItem = () => setItem(item - 1);
return (
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={incrementItem}>Increment</button>
<button onClick={decrementItem}>Decrement</button>
</div>
);
};
export default App;import React from "react";
import { useInput } from "@nc-react-hooks/use-input";
const App = () => {
const validator = value => !value.includes("@");
const name = useInput("Mr. ", validator);
return (
<>
<input placeholder="Name" {...name.props} />
</>
);
};
export default App;import React from "react";
import { useInput } from "@nc-react-hooks/use-input";
const App = () => {
const maxLen = (value: string | string[]) => value.length <= 10;
const name = useInput("Mr.", maxLen);
return (
<>
<input placeholder="Name" {...name} />
</>
);
};
export default App;import React from "react";
import { useTabs } from "@nc-react-hooks/use-tabs";
interface Icontent {
tab: string;
content: string;
}
const content: Icontent[] = [
{
tab: "Section 1",
content: "I'm the content of the Section 1"
},
{
tab: "Section 2",
content: "I'm the content of the Section 2"
}
];
const App = () => {
const { currentItem, changeIetm } = useTabs(0, content);
return (
<>
{content.map((section, index) => (
<button onClick={() => changeIetm(index)}>{section.tab}</button>
))}
<div key="index">{currentItem.content}</div>
</>
);
};
export default App;- useEffect는 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷함
- useEffect는 2개의 인자를 받는데 첫번째는 function의 effect, 두번째는 deps이며 deps의 값이 변한다면 effect가 실행되도록 합니다. deps가 설정되지 않으면 모든 값 변화에 반응함
- 어떤 경우에도 실행되고 싶지 않게 하려면 deps에 빈 디펜던시를 전해주면 됨.
React Hook to update your document's title.
yarn add @nc-react-hooks/use-title
npm i @nc-react-hooks/use-title
import React from "react";
import { useTitle } from "@nc-react-hooks/use-title";
const App = () => {
useTitle("Welcome");
return <h1>Welcome</h1>;
};
export default App;| Argument | Type | Description | Required |
|---|---|---|---|
| title | string | The title you want to use on your document | yes |
import React from "react";
import { useClick } from "@nc-react-hooks/use-click";
const App = () => {
const sayHello = () => console.log("say hello");
const title = useClick(sayHello);
return (
<>
<h1 ref={title}>Hi</h1>
</>
);
};
export default App;import React from "react";
import { useConfirm } from "@nc-react-hooks/use-confirm";
function App() {
const deleteAction = () => {
console.log("Deleting");
};
const abort = () => {
console.log("Aborted");
};
const confirmDelete = useConfirm("Are you sure?", deleteAction, abort);
return <button onClick={confirmDelete}>Delete</button>;
}
export default App;import React from "react";
import { usePreventLeave } from "@nc-react-hooks/use-prevent-leave";
const App = () => {
const { enablePrevent, disablePrevent } = usePreventLeave();
return (
<div>
<button onClick={enablePrevent}>Protect</button>
<button onClick={disablePrevent}>Unprotect</button>
</div>
);
};
export default App;import React from "react";
import { useBeforeLeave } from "@nc-react-hooks/use-before-leave";
const App = () => {
const begForLife = () => console.log("pls dont leave");
useBeforeLeave(begForLife);
return <div>hello</div>;
};
export default App;import React from "react";
import { useFadeIn } from "@nc-react-hooks/use-fade-in";
const App () => {
const fadeInH1 = useFadeIn(1, 2);
const fadeInP = useFadeIn(5, 1, "cubic-bezier(0.4, 0, 1, 1)");
return (
<div>
<h1 {...fadeInH1}>hello</h1>
<p {...fadeInP}>Lorem ipsum dolor</p>
</div>
);
}
export default App;import React from "react";
import { useNetwork } from "@nc-react-hooks/use-network";
const App () => {
const hadleNetworkChange = (online: boolean) => {
console.log(online ? "We just went online" : "We are offline");
};
const online = useNetwork(hadleNetworkChange);
return (
<div>
<h1>{online ? "Online" : "Offline"}</h1>
</div>
);
}
export default App;import React from "react";
import { useScroll } from "@nc-react-hooks/use-scroll";
const App = () => {
const { y } = useScroll();
return (
<div style={{ height: "1000vh" }}>
<h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>
hello
</h1>
</div>
);
};
export default App;import React from "react";
import { useFullScreen } from "@nc-react-hooks/use-full-screen";
const App = () => {
const onFullScreen = (isFull: boolean) => {
console.log(isFull ? "We are full" : "We are small");
};
const { element, triggerFullscreen, exitFullscreen } = useFullScreen(
onFullScreen
);
return (
<div style={{ height: "1000vh" }}>
<div ref={element}>
<img src="https://i.imgur.com/FPwTJGw.jpg" alt="test photo" />
<button onClick={exitFullscreen}>Exit fullscreen</button>
</div>
<button onClick={triggerFullscreen}>Make fullscreen</button>
</div>
);
};
export default App;https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
import React from "react";
import { useNotification } from "@nc-react-hooks/use-notification";
const App = () => {
const triggerNotification = useNotification("hi", { body: "hello" });
return (
<div>
<h1>hello</h1>
<button onClick={triggerNotification}>noti!</button>
</div>
);
};
export default App;import React from "react";
import { useAxios } from "@nc-react-hooks/use-axios";
const App = () => {
const { loading, data, error, refetch } = useAxios({
url: "https://yts.lt/api/v2/list_movies.json"
});
return (
<div>
<h1>{data && data.status}</h1>
<h2>{loading && "Loading"}</h2>
<button onClick={refetch}>Refetch</button>
</div>
);
};
export default App;npm login
npm publish --access public