better-frames-1 v1.0.5

Add Canvas to your React component

const canvas = new Canvas()

const divRef = (div: any) => {
  if (div !== null) {
    canvas.setDiv(div)
  }
}

canvas.addFrame(CustomFrame, {canvas})

return (
  <div ref={divRef} />
);

Create custom Frame component

Define props. These will be passed in by Canvas on Frame creation.

interface Props {
  canvas: Canvas
  geometry: Geometry
  id: number
}

const CustomFrame: React.FunctionComponent<Props> = (props) => {

Define Frame header buttons.

const buttons: Button[] = [
  {
    icon: <Icon/>,
    onClick: onClickFunction,
    tip: 'Tooltip',
  }
]

Define Frame.

return (
  <div>
    <Frame
      buttons={buttons}
      canvas={canvas}
      geometry={geometry}
      onGeometryChange={() => {}}
      title={"Title"}
      frameOptions={frameOptions} // optional prop used for Frame customization
    >
      <h1>Body Text</h1>
    </Frame>
  </div>
)

Customization

Modify default styled components by using the style extension feature.

const wrapperStyle = styled(canvas.getWrapperStyle())`
  background-color: pink;
  border: 5px solid purple;
  outline: 2px solid black;
`
const headerStyle = styled(canvas.getHeaderStyle())`
  color: pink;
  background-color: purple;
  borderBottom: 1px solid purple;
`

const buttonStyle = styled(canvas.getButtonStyle())`
  &:hover {
    background-color: pink;
  }
`

const frameOptions: FrameOptions = {
  wrapperStyle: wrapperStyle,
  headerStyle: headerStyle,
  buttonStyle: buttonStyle
}

Examples:

1. link to Pink.tsx, link to Github Pages