@offsetpartners/react-components

React Components for Figure and Offset

Usage no npm install needed!

<script type="module">
  import offsetpartnersReactComponents from 'https://cdn.skypack.dev/@offsetpartners/react-components';
</script>

README

React Components

npm (scoped) Travis (.org)

Descriptions

React Components for Figure and Offset.

Main Purpose

Allows dev team to slowly port complex custom components over to React where development will be much more efficient.

Usage

Via React:

  • Install the package:
$ npm i @offsetpartners/react-components
  • Import Package
require("@offsetpartners/react-components");
--- or ---
import Figure from "@offsetpartners/react-components";
--- or ---
import { COMPONENT_NAME } from "@offsetpartners/react-components";

Via CDN Link:

<!-- Make Sure to include these in the <head /> -->
<head>
  <!-- This is for Bundled CSS file -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@offsetpartners/react-components@latest/dist/figure.css"
  />
</head>

<!-- Fetch via CDN Link -->
<body>
  <!-- For QueryBuilder -->
  <div id="fig-query-builder"></div>

  <!-- 
    For any props that need to be pass to the Component.
    This ALWAYS needs to be defined before the CDN Link
  -->
  <script type="text/javascript">
    FigureReact = {};
  </script>

  <!-- Make sure to include at the bottom of body to optimize load times -->

  <!-- Production React -->
  <script
    crossorigin
    src="https://unpkg.com/react@16/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
  ></script>

  <script src="https://unpkg.com/@offsetpartners/react-components@latest/dist/figure.js"></script>
</body>

Development

  • Clone the repo:
git clone https://github.com/offsetpartners/react-components.git
  • CD into Project Directory and run to install deps:
npm i
  • Once all packages have been installed then simply run to start a styleguidist server
npm run start
  • Then viola you're ready to play around with all the Components

Reference Libraries

Roadmap

  • Add tests to each Component
  • Convert to Typescript
  • Optimize bundle

Version

v. 0.8.3