The Example App’s widgets live in the “src/Widgets” subdirectory. In there, each widget has its own directory containing the files defining the widget’s class, its editing configuration, and the component for rendering instances of it. One way to physically create a widget is to duplicate an existing one and rename the directory and the files accordingly. For this tutorial, we used the
IconWidget as a template.
The first thing to spend a moment on should be the attributes needed in the widget’s class definition for letting editors select the options they want for an actual widget instance. In this case, only one attribute – for specifying the platforms offered for sharing with – is required. As you can see below, we named it
shareButtons and made it a
multienum attribute to enable selecting more than one value. For clarity, we’re using only three of the many share buttons
react-share has available.