Get unlimited public & private packages + team-based management with npm Teams.Learn more »

This package has been deprecated

Author message:

WARNING: This project has been renamed to fuco. Install using fuco instead

functional-web-component

0.4.1 • Public • Published

functional-web-component

npm install size Build Status

Functional Component like React, but for Web Components.

<!DOCTYPE html>
<html lang="en">
  <body>
    <counter-app></counter-app>
    <script type="module">
      import {
        html,
        defineElement,
        useState
      } from "//unpkg.com/functional-web-component?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);
    </script> 
  </body>
</html>

Installation

npm install functional-web-component
# or use yarn 
yarn add functional-web-component

Hooks

useAttribute

As same as getAttribute, but useAttribute updates the component when the value of the specified attribute changes.

defineElement("greet-element", () => {
  const name = useAttribute("name");
  const hidden = useAttribute("hidden", value => value != null);
  if (hidden) {
    return html``;
  }
  return html`
    <div>Hello, ${name}!</div>
  `;
});
 
html`
  <greet-element name="World"></greet-element>
`;
// => `<div>Hello, World</div>`
 
html`
  <greet-element name="WebComponent" hidden></greet-element>
`;
// => ``

useProperty

If you use useAttribute, you can only receive string type values. Using useProperty allow to recieve node's Javascript property value and update the component when the value of this property changes.

defineElement("card-element", () => {
  const card = useProperty("card");
  return html`
    <div>${card.mark} ${card.value}</div>
  `;
});
 
const heartAce = { mark: "", value: 1 };
html`
  <card-element .card=${heartAce}></card-element>
`;

useDispatchEvent

If you want to use CustomEvent, useDispatchEvent offers you dispatch function like dispatchEvent.

defineElement("send-message", () => {
  const dispatch = useDispatchEvent("some-message", {
    bubbles: true,
    composed: true
  });
  return html`
    <button @click=${() => dispatch("Hi!")}>Send</button>
  `;
});
 
// You can listen custom event using `@` prefix.
html`
  <send-message @some-message=${e => console.log(e.detail)}></send-message>
`;

useStyle

At first time rendering, useStyle adapt StyleSheet to the component.

function HelloWorld() {
  useStyle(css`
    div {
      color: red;
    }
  `);
  return html`
    <div>Hello, world</div>
  `;
}

useRef

You can use ref like React by setting value returned by useRef to attribute.

function Input() {
  const [value, setValue] = useState("");
  const inputRef = useRef(null);
  return html`
    <input ref=${inputRef} />
    <button @click=${() => setValue(inputRef.current.value)}>push</button>
  `;
}

useContext

createContext offers Context, and usingContext.defineProvider to define provider.

You can consume it using useContext(Context).

const ThemeContext = createContext();
 
// define a custom element as Provider
ThemeContext.defineProvider("theme-provider");
 
const App = () => html`
  <theme-provider .value=${"dark"}>
    <theme-comsumer></theme-comsumer>
  </theme-provider>
`;
 
// consume context
defineElement("theme-consumer", () => {
  const theme = useContext(ThemeContext);
  return html`
    <div>theme is ${theme}</div>
  `;
});

License

MIT

Install

npm i functional-web-component

DownloadsWeekly Downloads

0

Version

0.4.1

License

MIT

Unpacked Size

46.4 kB

Total Files

26

Last publish

Collaborators

  • avatar