5. Use Props

When you use a component in the framework, users can pass props to the component.

You can read the props passed from the user through the getProps function.

See Function Adapter's setup

The following code is an example of setting initial values through props passed through getProps.

import { reactive } from "@cfcs/core";


const REACTIVE_ADAPTER = ({ getProps }) => {
  const props = getProps();
  const obj = reactive({
    width: props?.startWidth ?? 0,
    height: props?.startHeight ?? 0,
  });

  return obj;
};

Frameworks

props can be passed to Adapter through the second parameter of useReactive.

• React
• Vue@2
• Vue@3
• Svelte

import { useReactive } from "@cfcs/react";

function useReactiveComponent(props) {
  return useReactive(REACTIVE_ADAPTER, () => props);
}
export function App() {
  const {
    width,
    height,
  } = useReactiveComponent({
    startWidth: 100,
    startHeight: 10,
  });

  return <div>{width}x{height}</div>;
}