React

The If Design System React library provides front-end developers and engineers a collection of reusable React components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work

Resources

Storybook

Install

Prerequisites

A decent bash system. For example: iTerm, Terminal in VSCode, Linux Bash, Ubuntu Bash through Windows WSL2 etc
Node >=14.17.3 and npm >=6.14.4

Using npm:

// Example with the button component
npm i --save @ids-react/button

Or yarn:

// Example with the button component
yarn add @ids-react/button

Getting started

You can use whichever bundler you like
Components are to be installed individually, we have no bundle for the react components yet

Bundling

Please use sass package instead of node-sass or dart-sass, as the latter ones do not support some of the sass features which are used in ids-core.

Webpack

webpack.config.js

config: {
…
  module: {
  …
    rules: {
    …
      test: /\.scss$/,
          use
    :
        [
            'style-loader',
            { loader: 'css-loader', options: { modules: true } },
            'resolve-url-loader',
            'sass-loader',
        ],
            include
    :
        path.resolve(__dirname, '../'),
    }
  }
}

Rollup

rollup.config.js


import postcss from 'rollup-plugin-postcss';

export default [
    {
        input: '…',
        output: […],
external: […],
plugins: [
      …
      postcss({
          use: ['scss'],
          modules: true,
      }),
],
},
]
;

Troubleshooting

If you experience any issues while getting set up with the libraries, please head over to our MS Teams channel . We're always glad to help!

```

Edit this section