ODX Website React Component Library based on Tailwind.
- Install package:
pnpm add -D @odx/websites-react - Install odxwebsite ui package:
pnpm add -D @odx/websites-ui - Install peer dependency:
pnpm add -D tailwindcss - Init tailwind:
npx tailwindcss init - Add odxwebsite ui tailwind preset and import the content module in your content configuration to prevent Tailwind from purging its styles:
import preset from '@odx/websites-ui/tailwind';
import content from '@odx/websites-react/tailwind-lib-content';
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('@odx/websites-ui/tailwind')],
content: [...content],
theme: {
extend: {},
},
plugins: [],
};- Import the global styles including the @tailwind directives for each of Tailwind’s layers to your main CSS file. You can import the Global styles in your main JS file like this:
import '@odx/websites-ui/style';The React package is a collection of React components that are structured with the following entry points:
-
@odx/websites-react/components- General components -
@odx/websites-react/web- Dräger Website specific components -
@odx/websites-react/hooks- React hooks
You can import and use components like this in your project:
import {Button} from '@odx/websites-react/components';In order to have icons working in your application, the following packages need to be installed install and imported at the root level or any other place where icon need to be used:
Run the following commands to install the required packages:
pnpm add @odx/icons @odx/flag-iconsIcons can be imported in your main entry file like this:
import '@odx/icons/core';
import '@odx/icons/medical';
import '@odx/icons/safety';
import '@odx/icons';
import '@odx/flag-icons/4x3';
import '@odx/flag-icons';Please refer to our Storybook, to see the components in action and to get further information.