markdown formatting using grommet components



Custom components and props to override html elements such as 'img' or 'pre'. By default 'a', 'p', 'img', and table elements are overridden with grommet components.

  a: { component: Anchor, props: {...} },
  img: { component: Image },
  p: { component: Paragraph },
  table: { component: Table },
  td: { component: TableCell },
  tbody: { component: TableBody },
  tfoot: { component: TableFooter },
  th: { component: TableCell },
  thead: { component: TableHeader },
  tr: { component: TableRow }


Used to tune the jsx compiler to specific properties, available options on markdown-to-jsx.

{ ... }

React/DOM Properties

At its core, the Markdown component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.