1.5 KiB
1.5 KiB
| title |
|---|
| Render |
The Render component is componet that renders a FreeSewing pattern.
It's an alternative to rendering patterns as SVG, allowing for more
interactive use of our patterns in your frontend.
This component used to be named Draft but was renamed to Render to better
capture what the component does.
The name Draft is deprecated and will be removed in a future release.
Example
Props
| Name | Type | Default | Description |
|---|---|---|---|
| design | bool |
false |
Whether or not to enable design mode |
| style | object |
{} |
Optional extra CSS for the SVG |
| focus | string |
The element to be in focus in design mode | |
| raiseEvent | function |
A method to pass events to the parent component | |
| width (*) | number |
The SVG width | |
| height (*) | number |
The SVG height | |
| settings (*) | object |
The draft settings | |
| parts (*) | object |
An object holding the drafted parts |
(*) Use pattern.getRenderProps() to get these props
The width, height, settings, and parts props are provided by the
getRenderProps() method of
the Pattern object.
They are typically uses as in the example below:
<Render {...pattern.getRenderProps()} />