Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wtnbass/fuco
Functional Component like React, but for Web Components.
https://github.com/wtnbass/fuco
hooks lit-html webcomponents
Last synced: about 2 months ago
JSON representation
Functional Component like React, but for Web Components.
- Host: GitHub
- URL: https://github.com/wtnbass/fuco
- Owner: wtnbass
- License: mit
- Created: 2019-03-25T22:16:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T14:17:26.000Z (over 1 year ago)
- Last Synced: 2023-09-26T10:38:09.234Z (12 months ago)
- Topics: hooks, lit-html, webcomponents
- Language: TypeScript
- Homepage:
- Size: 2.6 MB
- Stars: 72
- Watchers: 4
- Forks: 2
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# fuco
[](https://www.npmjs.com/package/fuco)
[](https://packagephobia.now.sh/result?p=fuco)
[](https://github.com/wtnbass/fuco/actions)
[](https://codecov.io/gh/wtnbass/fuco)
Functional Component like React, but for Web Components.
```html
import { html, defineElement, useState } from "//unpkg.com/fuco?module";
function Counter() {
const [count, setCount] = useState(0);
return html`
<div>${count}</div>
<button @click=${() => setCount(count + 1)}>+</button>
<button @click=${() => setCount(count - 1)}>-</button>
`;
}
defineElement("counter-app", Counter);
```
- [Installation](#Installation)
- [Hooks](#Hooks)
- [useAttribute](#useAttribute)
- [useProperty](#useProperty)
- [useDispatchEvent](#useDispatchEvent)
- [useStyle](#useStyle)
- [useState](#useState)
- [useReducer](#useReducer)
- [useRef](#useRef)
- [useContext](#useContext)
- [useEffect](#useEffect)
- [useMemo](#useMemo)
- [useCallback](#useCallback)
## Installation
```sh
npm install fuco
# or use yarn
yarn add fuco
```
## Hooks
- Original Hooks
- [useAttribute](#useAttribute)
- [useProperty](#useProperty)
- [useDispatchEvent](#useDispatchEvent)
- [useStyle](#useStyle)
- React Hooks compatible
- [useState](#useState)
- [useReducer](#useReducer)
- [useRef](#useRef)
- [useContext](#useContext)
- [useEffect](#useEffect)
- [useLayoutEffect](#useLayoutEffect)
- [useMemo](#useMemo)
- [useCallback](#useCallback)
### useAttribute
`useAttribute` returens attribute value, and updates the component when the attribute specified by the first argument is changed.
```js
defineElement("greet-element", () => {
const name = useAttribute("name");
const hidden = useAttribute("hidden", value => value != null);
if (hidden) {
return html``;
}
return html`
Hello, ${name}
`;
});
html`
`;
// => `
Hello, World`
html`
`;
// => ``
```
### useProperty
`useProperty` returns element's property value, and updates the component when the property values is changed.
```js
defineElement("card-element", () => {
const card = useProperty("card");
return html`
${card.mark} ${card.value}
`;
});
const heartAce = { mark: "♥", value: 1 };
html`
`;
```
### useDispatchEvent
`useDispatchEvent` offers `dispatch` function like `dispatchEvent` to use CustomEvent.
```js
defineElement("send-message", () => {
const dispatch = useDispatchEvent("some-message", {
bubbles: true,
composed: true
});
return html`
dispatch("Hi!")}>Send
`;
});
// You can listen custom event using `@` prefix.
html`
console.log(e.detail)}>
`;
```
### useStyle
`useStyle` can adapt a StyleSheet to the component.
```js
function HelloWorld() {
useStyle(
() => css`
div {
color: red;
}
`
);
return html`
Hello, world
`;
}
```
### useState
`useState` returns a pair of state and setter function, and upadates the component by updating state using setter function.
```js
function Counter() {
const [count, setCount] = useState(0);
return html`
${count}
setCount(count + 1)}>PLUS
`;
}
```
### useReducer
`useReducer` returns a pair of state and dispatch function.
```js
function Counter() {
const [count, dispatch] = useReducer((state, action) => state + action, 0);
return html`
${count}
dispatch(1)}>PLUS
`;
}
```
### useRef
`useRef` returned a ref object like React's, and you can recieve a DOM by setting ref object to attribute.
```js
function Input() {
const [value, setValue] = useState("");
const inputRef = useRef(null);
return html`
setValue(inputRef.current.value)}>push
`;
}
```
### useContext
`createContext` offers `Context`, and using`Context.defineProvider` to define provider, and you can consume it using `useContext(Context)`.
```js
const ThemeContext = createContext();
// define a custom element as Provider
ThemeContext.defineProvider("theme-provider");
const App = () => html`
`;
// consume context
defineElement("theme-consumer", () => {
const theme = useContext(ThemeContext);
return html`
theme is ${theme}
`;
});
```
### useEffect
`useEffect` gives you a side effects. it will run after rendering the component.
```js
function Timer() {
useEffect(() => {
const id = setInterval(() => console.log("interval"));
return () => clearInterval(id);
}, []);
return html``;
}
```
### useLayoutEffect
`useLayoutEffect` runs after the DOM has been updated, but before the browser has had a chance to paint those changes
```js
function Box() {
const ref = useRef(null);
useLayoutEffect(() => {
ref.current.style.top = "100px";
});
return html`
`;
}
```
### useMemo
`useMemo` returns a memorized value. the value will update when deps given as the second argument.
```js
function Plus() {
const value = useMemo(() => a + b, [a, b]);
return html`
${value}
`;
}
```
### useCallback
`useCallback` returns memorized callback as same as `useMemo`.
```js
function Greet() {
const greet = useCallback(() => alert("Hello"));
return html`
hello
`;
}
```
## License
MIT