ods-component-library

ODS Components React

Build Status

Installation

The component library has to be consumed via the SIP feed (Connect to Azure Artifacts).

npm install @zeiss/ods-components-react
OR
yarn add @zeiss/ods-components-react

Development scripts

Running the application in development mode using storybook

yarn workspace @zeiss/ods-components-react start:dev

Running the linters

yarn workspace @zeiss/ods-components-react lint

Running the tests

yarn workspace @zeiss/ods-components-react test

Generate artifact build

yarn workspace @zeiss/ods-components-react build

Create storybook demo build

yarn workspace @zeiss/ods-components-react build:demo

Consuming the library

import { Button } from '@zeiss/ods-components-react';

export default function Example() {
  return <Button label="ODS Button" onClick={() => {}} />;
}

The library is styled with Tailwind. If your application is build with Tailwind, a Tailwind installation and integration of the ODS Foundations is required. Please refer to the ODS Foundations readme for further guidance regarding installation.

If the host application is not using Tailwind, it is sufficient to require the pre-compiled stylesheet. In your index.css file import:

@import '@zeiss/ods-components-react/dist/main.css';

Notes

• There is an issue with applications created with CRA and the tailwind integration. The usage of the library is currently only possible via the pre-compiles stylesheet.