# sgds-govtech-react

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

Latest version **0.2.7** (published 2021-04-12) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install sgds-govtech-react
pnpm add sgds-govtech-react
yarn add sgds-govtech-react
bun add sgds-govtech-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2021-04-12 |
| First published | 2019-08-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 284.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jywei, albertli0538, sylph3r |

## Links

- npm: https://www.npmjs.com/package/sgds-govtech-react
- npm.io page: https://npm.io/package/sgds-govtech-react

## Recent versions

- 0.2.7 (latest) — 2021-04-12
- 0.2.5 — 2020-11-23
- 0.2.4 — 2020-10-02
- 0.2.3 — 2020-10-01
- 0.2.2 — 2020-09-29
- 0.2.1 — 2020-09-24
- 0.2.0 — 2020-09-24
- 0.1.12 — 2020-09-19
- 0.1.11 — 2020-02-24
- 0.1.10 — 2020-02-13
- 0.1.9 — 2019-09-25
- 0.1.8 — 2019-09-20
- 0.1.7 — 2019-09-20
- 0.1.4 — 2019-08-21
- 0.1.3 — 2019-08-21
- … 2 more at https://npm.io/package/sgds-govtech-react/versions

## README

# sgds-govtech-react

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

React Documentation can be found [here](https://govtechsg.github.io/sgds-govtech-react) - [https://govtechsg.github.io/sgds-govtech-react](https://govtechsg.github.io/sgds-govtech-react)

We are in early development! If you are trying out sgds-govtech-react, feel free to leave us feedback in the issues page, or even submit a [PR](https://github.com/govtechsg/sgds-govtech-react/pulls)!

## Installation

```
npm install sgds-govtech-react
```

### Peer dependencies

Note that sgds-govtech-react has a peer dependency of styled-components - both packages need to be installed.

## Usage

You will need to first import the [sgds](https://www.designsystem.gov.sg) css styles, either in your website's `<head>` element or through your frontend build.

For example, `create-react-app` users should insert the css into the `<head>` of `public/index.html`

```html
<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/sgds-govtech@1.3.15/css/sgds.css"
  />
</head>
```

Alternatively, install the `sgds-govtech` package:

```bash
npm install sgds-govtech
```

And import the `css` using your build tool (e.g. Webpack):

```javascript
// In your entry point
import "sgds-govtech/css/sgds.css";
```

### Customisation with Sass (advanced)

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 sgds-govtech
```

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);

// You must override this variable!
// See https://www.designsystem.tech.gov.sg/docs/customise-sgds/ for details
$sgds-font-path: "../../../fonts";

// Import all of sgds
@import "~sgds-govtech/sgds/sass/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/).

## Getting started

```jsx
import React from "react";
import ReactDOM from "react-dom";

import { Button } from "sgds-govtech-react";

const app = () => {
  return (
    <div className="App">
      <Button>Submit</Button>
    </div>
  );
};

ReactDOM.render(app, document.getElementById("root"));
```

### Patch Notes

V0.1.7: Added Sidenav, Tab and their storybook documentation to the library
V0.1.2: Added footer and masthead to component library

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