Bridge: Hack4Impact UIUC Design System

The Bridge React component library are a collection of resuable interface of elements. It implements and extends the Bridge Design system. You will find the implementations of each UI component and additional components that help developers quickly create the best experience for our products.

Installation

npm install @hack4impact-uiuc/bridge

yarn add @hack4impact-uiuc/bridge

Usage

Import the CSS directly into your project (src/index.js) if your asset packager supports it:

import '@hack4impact-uiuc/bridge/dist/styles.css'

Import required h4i-design components within src/App.js file or your custom component files:

import { Button } from '@hack4impact-uiuc/bridge';

Now you are ready to use the imported components, such as:

import React from 'react';
import { Button } from '@hack4impact-uiuc/bridge';
const App = () => (
    <Button onClick={() => alert('Button clicked!')}>APPLY NOW</Button>
)
export default App

Theming

Components use Hack4Impact's Design theme by default (src/theme.js) but you can provide your own theme using styled-component's ThemeProvider. You can either fully replace the theme or replace parts of the theme by placing your custom theme through a prop to our components or through <ThemeProvider> in the root of the application.

Server-side Rendering

This library depends on styled-components. Thus, if you are server rendering React or using a framework like next.js or gatsby, follow styled-component's server rendering setup.

Local Development

We use Storybook to hot-reload and test our components during development. You can edit the playground/Playground.js file to import and test the components you are working on. Please do not commit any work on the file so other developers can use the same file to test.

To run:

yarn
yarn storybook

Check out our Contributing Guidelines for code style, testing, component dev, etc

Authors

Timothy Ko (@tko22)
Jackie Osborn (@jackieo5023)
David Wang (@davidenwang)
Chloe Chan (Product Designer)