es-components
TypeScript icon, indicating that this package has built-in type declarations

21.13.0 • Public • Published

Exchange Solutions React components

Build Status npm version

Documentation and Demos

https://wtw-im.github.io/es-components/

Installation and Usage

npm install --save es-components

es-components comes optimized for tree shaking. If your build tool does not support tree shaking please direct your imports towards es-components/lib. You may use either direct file paths or destructure from the index file.

// use this to keep the size of your bundles light
import Component from 'es-components/lib/path/to/component';
// or
import { Component } from 'es-components/lib';

Using The UMD Bundle

Because ES Components needs a reference to document.body on startup, you must either include the defer attribute, or place the <script> tag somwhere within the body of your html page. Here we're showing it using the defer attribute.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>My ES Components Site</title>
  <!-- These fonts are used by es-components -->
  <link
    rel="stylesheet"
    href="https://app.viabenefits.com/static/cdn/es-assets/icons.css"
  />
  <link
    rel="stylesheet"
    href="https://app.viabenefits.com/static/cdn/es-assets/source-sans-pro.css"
  />
  <!-- You must include React, ReactDOM, PropTypes and Styled Components. ES Components depends on those packages. -->
  <script
    crossorigin
    src="https://app.viabenefits.com/static/third-party/react@16/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://app.viabenefits.com/static/third-party/react-dom@16/umd/react-dom.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://app.viabenefits.com/static/third-party/prop-types@15/prop-types.js"
  ></script>
  <script
    crossorigin
    src="https://app.viabenefits.com/static/third-party/styled-components/dist/styled-components.min.js"
  ></script>
  <script
    crossorigin
    defer
    src="https://app.viabenefits.com/static/third-party/es-components/bundle/main.min.js"
  ></script>
</head>

<body>
  <!-- My ES Components Site Body -->
</body>

Jest

es-components uses ResizeObserver, but if you're using jsdom, it doesn't come with it. You can set up jest to work with es-components by using build-utils/jest in your setupFilesAfterEnv configuration. Eg:

// jest.config.js

module.exports = {
  // other jest config
  setupFilesAfterEnv: [
    'es-components/build-utils/jest'
    // others...
  ]
};

Readme

Keywords

none

Package Sidebar

Install

npm i es-components

Weekly Downloads

842

Version

21.13.0

License

MIT

Unpacked Size

2.75 MB

Total Files

216

Last publish

Collaborators

  • aabenoja
  • jrios
  • darrken
  • stevematney