Skip to main content

useDesignTranslation

The useDesignTranslation hook provides translations for the entire FreeSewing collection of designs.

Beware of bundle size

Use this hook to load design translations 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 translations 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'
import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation'

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

  // ...
}

Return value​

Calling the hook returns an object holding design translations.

Named exports​

You can also load the designTranslations named exports from the same import:

import {
  designTranslations, // An object where the key is the (lowercase) design name, and the value on object holding the design translations
  useDesignTranslation, // The hook
} from '@freesewing/react/hooks/useDesignTranslation'
  • designTranslations is an object where the key is the (lowercase) design name, and the value on object holding the design translations.