20CAKE20.JS
09-advanced

Advanced

13

09-advanced/08-behavior-life.tsx

Behavior Life

Example

Official Cake20 View example for behavior life.

export const data = {
  color: "#f59e0b",
};

const color = behavior<HTMLElement, string>({
  start(element, value) {
    element.style.color = value;
  },
  update(element, value, previous) {
    if (value !== previous) element.style.color = value;
  },
  close(element) {
    element.style.removeProperty("color");
  },
});

export default () => (
  <p use={color} useValue={data.color}>
    Candle
  </p>
);