# haphizi-sb

> Design System unites Singapore Government digital services around a common visual language and user experience

Latest version **1.0.3** (published 2022-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install haphizi-sb
pnpm add haphizi-sb
yarn add haphizi-sb
bun add haphizi-sb
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-05-30 |
| First published | 2022-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.20.0 |
| Dependencies | 13 |
| Unpacked size | 8.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | GovTechSG |
| Maintainers | haphizi |

## Links

- npm: https://www.npmjs.com/package/haphizi-sb
- Repository: https://github.com/GovTechSG/sgds-govtech-react
- Homepage: https://github.com/GovTechSG/sgds-govtech-react/
- Issues: https://github.com/GovTechSG/sgds-govtech-react/issues
- npm.io page: https://npm.io/package/haphizi-sb

## Dependencies (13)

- [warning](https://npm.io/package/warning.md) ^4.0.3
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@restart/ui](https://npm.io/package/@restart/ui.md) ^1.2.0
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^5.2.1
- [@restart/hooks](https://npm.io/package/@restart/hooks.md) ^0.4.6
- [@types/invariant](https://npm.io/package/@types/invariant.md) ^2.2.35
- [prop-types-extra](https://npm.io/package/prop-types-extra.md) ^1.1.1
- [@storybook/addon-a11y](https://npm.io/package/@storybook/addon-a11y.md) ^6.4.9
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.2
- [@storybook/addon-storysource](https://npm.io/package/@storybook/addon-storysource.md) ^6.4.9
- [@types/react-transition-group](https://npm.io/package/@types/react-transition-group.md) ^4.4.4

## Recent versions

- 1.0.3 (latest) — 2022-05-30
- 1.0.2 — 2022-05-30
- 1.0.1 — 2022-05-30
- 1.0.0 — 2022-05-30

## README

# @govtechsg/sgds-govtech-react

React components powered by [Singapore Government Design System](https://www.designsystem.gov.sg)

`@govtechsg/sgds-govtech-react` take references from [react-boostrap](https://react-bootstrap.github.io/) 

## Version Compatibility

See the below table on which version of `@govtech/sgds-govtech` you should be using in your project.

| @govtechsg/sgds-govtech version | @govtechsg/sgds-govtech-react version |
| ------------------------------- | ------------------------------------- |
| v2.x                            | v1.x                                  |

## Installation

`@govtechsg/sgds-govtech-react` is not ship with any included CSS . Apply `@govtechsg/sgds-govtech@2.0.0` styles by installing the module or using CDN.

`@govtechsg/sgds-govtech-react` uses `bootstrap-icons` for certain components like Form but it is not ship with it. Install `bootstrap-icons` or use CDN if you need it Please refer to [bootstrap-icons](https://icons.getbootstrap.com/#usage) for usage instructions

```js

npm install @govtechsg/sgds-govtech-react@alpha

//not required if using cdn
npm install @govtechsg/sgds-govtech@alpha bootstrap-icons

```

## Importing Components

You should import individual components like: `@govtechsg/sgds-govtech-react/Button` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.

```js
import { Button } from '@govtechsg/sgds-govtech-react/Button';

// or less ideally
import { Button } from '@govtechsg/sgds-govtech-react';
```

## Stylesheets

#### Using CSS / SASS

```js
// In your entry point
// import CSS or
import '@govtechsg/sgds-govtech/sgds/sgds.css';
// import SASS
import '@govtechsg/sgds-govtech/sgds/sgds.scss';
```

#### Using CDN

```js

//index.html
<link href='https://v2dev.designsystem.gov.sg/sgds/sgds.css' rel='stylesheet' type='text/css'/>

//index.css
@import url('https://v2dev.designsystem.gov.sg/sgds/sgds.css');

```

# Advanced Usage

## Customisation with Sass

If you want to modify SGDS's base styling, you can import the Sass source (your project needs to support Sass compilation) and [override SGDS's sass variables](https://www.designsystem.tech.gov.sg/docs/customise-sgds/).

```
npm install @govtechsg/sgds-govtech@alpha
```

For example, importing sgds in your own sass file:

```scss
// styles/app.scss

// Override SGDS defaults
$primary: rgb(8, 11, 56);
$secondary: #ff8c00;
$warning: rgb(134, 37, 37);

// Import all of sgds
@import '@govtechsg/sgds-govtech/sgds/sgds.scss';
```

Then, in your app:

```js
import React from 'react';

import './styles/app.scss';

export default function App() {
  return <div>...</div>;
}
```

For more information on customising with Sass, see the [SGDS documentation](https://www.designsystem.tech.gov.sg/docs/customise-sgds/).

## "as" Prop API

With certain SGDS React components, you may want to modify the component or HTML tag that is rendered.

If you want to keep all the styling of a particular component but switch the component that is finally rendered (whether it's a different SGDS React component, a different custom component, or a different HTML tag) you can use the "as" Prop to do so.

See [example](https://react-bootstrap.github.io/getting-started/introduction#as-prop-api)

---
_Source: https://npm.io/package/haphizi-sb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._