1 | # Exchange Solutions React components
|
2 |
|
3 | [![Build Status](https://travis-ci.com/WTW-IM/es-components.svg?branch=master)](https://travis-ci.com/WTW-IM/es-components)
|
4 | [![npm version](https://badge.fury.io/js/es-components.svg)](https://badge.fury.io/js/es-components)
|
5 |
|
6 | ## Documentation and Demos
|
7 |
|
8 | [https://wtw-im.github.io/es-components/](https://wtw-im.github.io/es-components/)
|
9 |
|
10 | ## Installation and Usage
|
11 |
|
12 | ```shell
|
13 | npm install --save es-components
|
14 | ```
|
15 |
|
16 | `es-components` comes optimized for tree shaking. If your build tool does not support tree shaking please direct your imports towards `es-components/lib`.
|
17 | You may use either direct file paths or destructure from the index file.
|
18 |
|
19 | ```js
|
20 | // use this to keep the size of your bundles light
|
21 | import Component from 'es-components/lib/path/to/component';
|
22 | // or
|
23 | import { Component } from 'es-components/lib';
|
24 | ```
|
25 |
|
26 | ### Using The UMD Bundle
|
27 |
|
28 | ```html
|
29 | <!DOCTYPE html>
|
30 | <head>
|
31 | <meta charset="UTF-8" />
|
32 | <title>My ES Components Site</title>
|
33 | <!-- These fonts are used in the Icon sets, and in general font styles. -->
|
34 | <link rel="stylesheet" href="https://cdn.rawgit.com/WTW-IM/es-assets/8fbaf85d/font.css" />
|
35 | <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet" />
|
36 | <!-- You must include React and Styled Components. ES Components depends on those packages. -->
|
37 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
|
38 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
|
39 | <script crossorigin src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
|
40 | <script crossorigin src="https://unpkg.com/es-components/bundle/main.min.js"></script>
|
41 | </head>
|
42 | <body>
|
43 | <!-- My ES Components Site Body -->
|
44 | </body>
|
45 | ```
|