Skip to main content

useDesign

The useDesign hook provides access to the entire FreeSewing collection of designs.

Beware of bundle size

Use this hook to load a design when you plan to use the entire collection. If you only plan to use one or a few designs, you may want to load them differently as including this hook will include all FreeSewing designs in your code bundle.

Example​

Using the hook makes it easy to load a design if you want to be able to dynamically load a different design, or do not know in advance what designs should be made available.

import { useDesign } from '@freesewing/react/hooks/useDesign'

const MyComponent = ({ name = 'aaron' }) => {
  const Aaron = useDesign(name)

  // ...
}

Return value​

Calling the hook returns a design constructor, assuming the design name you pass it is in the FreeSewing collection.

Named exports​

You can also load the collection and designs named exports from the same import:

import {
  collection, // Object.keys(designs)
  designs, // An object where the key is the (lowercase) design name, and the value the design constructor
  useDesign, // The hook
} from '@freesewing/react/hooks/useDesign'
  • collection is an array of lowercase design names.
  • designs is an object where the key is the (lowercase) design name, and the value the design constructor.