34 lines
815 B
Markdown
34 lines
815 B
Markdown
|
---
|
||
|
|
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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
const renderProps = pattern.draft().getRenderProps()
|
||
|
|
|
||
|
|
return <Draft {...renderProps} />
|
||
|
|
```
|
||
|
|
|
||
|
|
<Note>
|
||
|
|
|
||
|
|
##### 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.
|
||
|
|
|
||
|
|
</Note>
|
||
|
|
|