1
0
Fork 0
freesewing/markdown/dev/reference/packages/components/render/en.md
Joost De Cock b34a2ee2ed feat: Flat import of markdown repo
This is a flat (without history) import of (some of) the content
from our markdown module.

We've imported this without history because the repo contains our
blog posts and showcases posts content prior to porting them to strapi.

Since this contains many images, it would balloon the size of this repo
to import the full history.

Instead, please refer to the history of the (archived) markdown repo
at: https://github.com/freesewing/markdown
2021-08-25 16:09:31 +02:00

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

Screenshot of the component

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()} />