One of the cool things about Web Components is that we can pass in data that the Web Component can use.
There are two ways that we can do that:
- By setting an attribute:
- Or by setting a property:
When we build our Web Component in React, we want to receive these properties and attributes as props to our root component.
To make sure that properties and attributes of the Web Component are passed down to the React App as props, we need to provide Direflow with a set of properties and their initial values.
There are three different methods to provide the properties and their initial values.
The easiest way is to set them as
defaultProps on the root React component.
If you're using a class component as the root React component, you can configure properties using a decorator
"experimentalDecorators": truein tsconfig.json
npm install babel-plugin-transform-decorators-legacy --dev
- Add to package.json:
Finally, you can also set properties as a part of the main Direflow configuration
Or, you can mix and match between these three methods.