useDesignTranslation

The useDesignTranslation hook provides translations for the entire open clothes 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 open clothes 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 '@openclothes/react/hooks/useDesign'
import { useDesignTranslation } from '@openclothes/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 '@openclothes/react/hooks/useDesignTranslation'

• designTranslations is an object where the key is the (lowercase) design name, and the value on object holding the design translations.