Get startedPropertiesProperties and attributesEventsStylingPluginsConfigurationAdditionalGuides & tipsContributingChangelog

Properties and attributes

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:
    <awesome-component componentTitle="New Title"></awesome-component>
  • Or by setting a property:
    const component = document.querySelector('awesome-component');
    component.sampleList = ['Create', 'Build', 'Use'],

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.

Method 1 - defaultProps

The easiest way is to set them as defaultProps on the root React component.

const App = (props) => {
...
}
// The Web Component will automatically subscribe to
// changes on 'componentTitle' and 'sampleList'
App.defaultProps = {
componentTitle: 'Awesome Component',
sampleList: [
'Create with React',
'Build as Web Component',
'Use it anywhere!',
],
}

Method 2 - class decorator

If you're using a class component as the root React component, you can configure properties using a decorator

import { DireflowConfiguration } from 'direflow-component';
@DireflowConfiguration({
properties: {
componentTitle: 'Awesome Component',
sampleList: [
'Create with React',
'Build as Web Component',
'Use it anywhere!',
],
}
})
class App extends React.Component {
...
}

Prerequisites

TypeScript
Set "experimentalDecorators": true in tsconfig.json

JavaScript

  • Run npm install babel-plugin-transform-decorators-legacy --dev
  • Add to package.json:
    "babel": {
    "plugins": ["transform-decorators-legacy"]
    },

Method 3 - Direflow configuration

Finally, you can also set properties as a part of the main Direflow configuration

import { DireflowComponent } from 'direflow-component';
import App from './App';
export default DireflowComponent.create({
component: App,
configuration: {
tagname: 'cool-component',
},
properties: {
componentTitle: 'Awesome Component',
sampleList: [
'Create with React',
'Build as Web Component',
'Use it anywhere!',
],
}
});

Or, you can mix and match between these three methods.



→ Events