freesewing/markdown/dev/reference/packages/components/draft/en.md

title
Draft

The Draft component renders a FreeSewing pattern in the browser as SVG.

To use the Draft component, pass it the result of pattern.getRenderProps() as props:

const renderProps = pattern.draft().getRenderProps()

return <Draft {...renderProps} />

Ensuring consistency of snippets between SVG and React output

The pattern.getRenderProps() returns a range of props, including an SVG object on which the preRender hook gets called prior to returning.

This way, svg.defs now holds all defs, including any that may have been added by custom plugins, and we use this verbatim in our React component.

This removes any discrepancies in how SVG rendering and React rendering handles the defs section of the SVG document, and thus displays snippets.