@pexip/components
Shared UI component library based on Pexip's design system.
Install
npm install @pexip/components
Usage
In your project, simply do the following:
import {FullSizeWindow, Sidebar} from '@pexip/components';
() => <FullSizeWindow>My stuff</FullSizeWindow>;
There are some global styles as well, with fonts, tokens, etc.
// Import fonts
import '@pexip/components/src/fonts.css';
// Import other global styles
import '@pexip/components/dist/index.css';
Enumerations
| Enumeration | Description |
|---|---|
| AvatarType | - |
| Color | - |
| FontVariant | - |
| LockStyle | - |
| ModalType | - |
| ProgressBarColor | - |
| RgbColor | - |
| StatCardVariant | - |
| TestId | - |
Interfaces
Type Aliases
Variables
Functions
| Function | Description |
|---|---|
| announce | Announce a message to screen readers. Announcer needs to be mounted in the application for this to work. |
| isBackgroundImageSrcEmpty | - |
| isImageSrcEmpty | - |
| isImageSrcString | - |
| isValidIconName | - |
| onEnter | - |
| sizeToPadding | - |
| useBelow360 | - |
| useBreakpointChange | - |
| useFocusFrom | This hook gives the ability to set the focus on an element which is then blurred right away, thereby effectively resetting the focus order. The next focusable element that comes after this element will be focused on the next tab. |
| useFocusFromOpened | Use this hook to set the focus point on an element when something becomes opened, e.g. set focus on a panel container or menu container when it becomes visible so that the next time the user hits on the tab key the element that becomes focused on is potentially a tabbable element inside the container element. |
| useGroupedPagesNav | - |
| useInput | - |
| useLandscape | - |
| useLg | - |
| useLgDown | - |
| useLgUp | - |
| useMd | - |
| useMdDown | - |
| useMdToXl | - |
| useMdUp | - |
| useMobileDevice | - |
| useMobileDeviceLandscape | - |
| useMobileDevicePortrait | - |
| useModal | - |
| useModalHandle | - |
| useMultistepIndicator | Convenience hook for using steps in MultistepIndicator |
| usePortrait | - |
| useScrollIntoView | - |
| useSm | - |
| useSmDown | - |
| useSmToLg | - |
| useSmToXl | - |
| useSmUp | - |
| useTabletDevice | - |
| useTabs | - |
| useTouchDevice | - |
| useXl | - |
| useXlDown | - |
| useXlUp | - |
| useXs | - |
| withColorScheme | - |
| withTabName | - |
| withTransition | - |