To help tie all the pieces we’ve learned about so far, let’s create an app/extension which allows us to create a variety of titles.

Bundle configuration

The first step is building our component with some relevant information with the ID and name of our component:

const TitleComponent = ({data, dispatch}: any) => {
  return (<></>);
}

const titleSchema = Schema.object({});

export const Component = component({
  componentTypeId: "titleApp",
  displayName: "TitleApp",
  schema: titleSchema,
  Component: TitleComponent,
  version: migrations.length,
  migrations,
});

We will need to build the schema and control component next.

Creating the Schema

Schema.object({
  title: Schema.string(), // This will be our custom title.
  size: Schema.string() // This is the title size.
})

We still have a few more steps; for example, we need to ask ourselves how we will retrieve this data from the user and what the controls will look like.

So, let’s use the overrideControls from Schema Methods/Types.

Control component

Before using the overrideControls method, we must create our control component:

function TitlePanel(props: Props) {
  const [title, setTitle] = useState('');
  
  return (
    <TitleContainer>
      <div className="content">
        <input type="text" />
      </div>
      <div className="actions">
        <button>Set</button>
        <button className="cancel">Cancel</button>
      </div>
    </TitleContainer>
  );
}

So, we are ready to put together the schema with the override and control component.

const ControlComponent = ({data, dispatch, closePanel}: any) => {
  const {title, size} = data;

  const onSet = (data: TitleEvent) => {
    dispatch((api: any) => {
      api.get('title').set(data.title);
      api.get('size').set(data.size);
    });
    closePanel();
  };

  const onClose = () => closePanel();

  return (
		<TitlePanel
			title={title}
			size={size}
			onSet={onSet}
			onClose={onClose} />
	)
}

Schema.object({
  title: Schema.string(),
  size: Schema.string()
}).overrideControls([{
  Control: ControlComponent,
  options: {
    icon: <span>C</span>,
    label: 'Configuration'
  }
}])