Possible to work on multiple Web Components in a single Direflow project?

[kelvinwongg]

I read thru this documentation, seems like I need to create another Direflow project if I need to create more Web Component tags.

[yaya-bhavik]

Hi @kelvinwongg,

One way to develop multiple web components in the same repository would be to setup a demo application which has routes to each of the Direflow components you register / create via the Direflow api.

For example with react-router: Each route would have a React component which renders a web component with its tag name.

function CustomElement({ props, tagName }) {
	const ref = React.useRef(null);

	React.useEffect(() => {
		if (ref && ref.current) {
			// Pass whatever props to the props object on ref
			Object.assign(ref.current, props);
		}
	}, [ref, props]);

	// Dynamically set the tag name for the web component
	// so that we are able to set the ref
	const CustomElementTag = tagName;
	return <CustomElementTag ref={ref}></CustomElementTag>;
}

Then under a specific route, we can use the element:

<CustomElement tagName={"example-component"} props={{ passedInProperty: "Hello"}} />

Developing each component would happen in isolation, kind of like StoryBook