diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index ea9edb04da24..ede4bc462f51 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -8710,6 +8710,7 @@ Map { "unstable_useContextMenu" => Object {}, "unstable_useFeatureFlag" => Object {}, "unstable_useFeatureFlags" => Object {}, + "usePrefix" => Object {}, "useTheme" => Object {}, } `; diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index a3610babe45b..ea2f8fa3b406 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -230,6 +230,7 @@ describe('Carbon Components React', () => { "unstable_useContextMenu", "unstable_useFeatureFlag", "unstable_useFeatureFlags", + "usePrefix", "useTheme", ] `); diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 557c30ff0b26..6512df2c9c9c 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -237,3 +237,4 @@ export unstable_TreeView, { } from './components/TreeView'; export { TabPanel, TabPanels, TabList, IconTab } from './components/Tabs'; export { GlobalTheme, Theme, useTheme } from './components/Theme'; +export { usePrefix } from './internal/usePrefix'; diff --git a/packages/react/src/internal/usePrefix.stories.mdx b/packages/react/src/internal/usePrefix.stories.mdx new file mode 100644 index 000000000000..58e662ced723 --- /dev/null +++ b/packages/react/src/internal/usePrefix.stories.mdx @@ -0,0 +1,34 @@ +import { usePrefix } from './usePrefix'; +import { Meta } from '@storybook/addon-docs'; + + + +# usePrefix + +[Source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/usePrefix.js) + +## Overview + +A hook that returns the prefix used in our classes. + +## Examples + +```js +import { usePrefix } from '@carbon/react'; + +function ExampleComponent() { + const prefix = usePrefix(); +} +``` + +Typically, `usePrefix` will be used alongside `classnames`. + +```js +import { usePrefix } from '@carbon/react'; +import { cx } from 'classnames'; + +function ExampleComponent() { + const prefix = usePrefix(); + const className = cx(`${prefix}--custom-component`); +} +```