fuco
Functional Component like React, but for Web Components.
Installation
npm install fuco# or use yarn yarn add fuco
Hooks
-
Original Hooks
-
React Hooks compatible
useAttribute
useAttribute
returens attribute value, and updates the component when the attribute specified by the first argument is changed.
; html` `;// => `<div>Hello, World</div>` html` `;// => ``
useProperty
useProperty
returns element's property value, and updates the component when the property values is changed.
; const heartAce = mark: "♥" value: 1 ;html` `;
useDispatchEvent
useDispatchEvent
offers dispatch
function like dispatchEvent
to use CustomEvent.
; // You can listen custom event using `@` prefix.html` console.log(e.detail)}>`;
useStyle
useStyle
can adapt a StyleSheet to the component.
{ ; return html` Hello, world `;}
useState
useState
returns a pair of state and setter function, and upadates the component by updating state using setter function.
{ const count setCount = ; return html` setCount(count + 1)}>PLUS `;}
useReducer
useReducer
returns a pair of state and dispatch function.
{ const count dispatch = ; return html` dispatch(1)}>PLUS `;}
useRef
useRef
returned a ref object like React's, and you can recieve a DOM by setting ref object to attribute.
{ const value setValue = ; const inputRef = ; return html` setValue(inputRef.current.value)}>push `;}
useContext
createContext
offers Context
, and usingContext.defineProvider
to define provider, and you can consume it using useContext(Context)
.
const ThemeContext = ; // define a custom element as ProviderThemeContext; const App = html` `; // consume context;
useEffect
useEffect
gives you a side effects. it will run after rendering the component.
{ ; return html``;}
useLayoutEffect
useLayoutEffect
runs after the DOM has been updated, but before the browser has had a chance to paint those changes
{ const ref = ; ; return html` `;}
useMemo
useMemo
returns a memorized value. the value will update when deps given as the second argument.
{ const value = ; return html` `;}
useCallback
useCallback
returns memorized callback as same as useMemo
.
{ const greet = ; return html` hello `;}
License
MIT