HW components

A React component library for the East Africa Hazards Watch project built with Emotion CSS in JS styled components. All features have support for Server Side Rendering (SSR), the latest two versions of evergreen browsers and IE>=11.

Installation

As a module

Install the package

npm install hw-components

or with yarn

yarn add hw-components

import and add the global styles component to the root of your app

import React from "react"

import { GlobalStyles } from 'hw-components';

export const App = () => (
  <>
    <GlobalStyles />
    <Main />
  </>
);

add the font to your html document

<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">

then import components and add them to your layout

import React from "react"

import { Header, Footer } from 'hw-components';

export const MyPage = () => (
  <div className="l-page">
    <Header />
    <div className="content">
      <h1>My page</h1>
    </div>
    <Footer />
  </div>
);

Requirements

If you are using hw-components as a npm module there are some external requirments:

• react >= 16.8
• react-dom >= 16.8

Development

Once you have cloned the repo, install the dependancies and start the styleguide.

yarn && yarn start

If you are using yarn link to develop with the component directly inside your app you can use the development of the bundle. This comes with source maps to help with debugging.

yarn dev

Deployment

To deploy a new version of the library follow these steps:

1. Semver from master locally and follow the bash intructions for documenting the release.

yarn release [major|minor|patch]

2. Deploy the new released version to Github pages (styleguide).

yarn deploy