React Components
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