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
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!