---
to: element.tsx
---
import React, { type FC } from 'react';
import ReactDOM from 'react-dom';
import reactToWebComponent from 'react-to-webcomponent';
import styles from './element.module.css';

interface Props {
  displayName?: string;
}

const CustomElement: FC<Props> = ({
  displayName = `Your Widget's Title`,
}) => {
  return (
    <div className={styles.root}>
      <h2>{displayName}</h2>
      <hr />
      <p>
        This is a Custom Element generated by Wix CLI.<br />
        Continue to develop this widget at <code>'<%- readablePath %>'</code>.
      </p>
    </div>
  );
};

const customElement = reactToWebComponent(
  CustomElement,
  React,
  ReactDOM as any,
  {
    props: {
      displayName: 'string',
    },
  }
);

export default customElement;
