---
title: react-components
---

Published as [@freesewing/react-components][1], this package provides
various React components to render FreeSewing patterns, as well as 
some utilities to facilitate frontend integration.

## Exports

FreeSewing uses named exports, and below is a list of all exports:

- `Pattern`: Renders a FreeSewing pattern
- `Svg`: Renders the svg section of a FreeSewing pattern
- `Defs`: Renders the defs of a FreeSewing pattern
- `Group`: Renders an SVG group of a FreeSewing pattern
- `Stack`: Renders a stack of a FreeSewing pattern
- `Part`: Renders a part of a FreeSewing pattern
- `Point`: Renders a point of a FreeSewing pattern
- `Path`: Renders a path of a FreeSewing pattern
- `Snippet`: Renders a snippet of a FreeSewing pattern
- `Grid`: Renders the grid of a FreeSewing pattern
- `Text`: Renders text of a FreeSewing pattern
- `TextOnPath`: Renders text on path of a FreeSewing pattern
- `PatternXray`: Renders the Xray/inspector variant of a FreeSewing pattern
- `utils`: A plain object holding the following utilities:
  - `getProps`
  - `withinPartBounds`
  - `getId`
  - `translateStrings`

## Installation

```sh
npm install @freesewing/react-components
```

[1]: https://www.npmjs.com/package/@freesewing/react-components