@pinpt/react-components
v1.0.0
Published
Common React Components
Downloads
4
Keywords
Readme
Setup
git clone
this repo in a directory as a sibling to any web projectscd
in to project and runnpm install && npm link
cd
into your web project and runnpm link pinpt-react-components
Alternate to npm link
If npm link
doesn't work, use the normal sym link command: cd
in to node_modules
and run
ln -s ../../react-components pinpt-react-components
where ../../react-components
is the relative path to the react components repo.
Non-sibling Installation
If you do not clone this repo into a location that is a sibling of your web projects, you'll need to ensure the web project's babel can find the component. Edit the config/paths.js
file to update the location.
Usage
Basic
import { MyComponentName } from 'pinpt-react-components';
<MyComponentName data={...} />
Semantic UI
This component library wraps the React Semantic UI library. Rather than doing this:
import { Button } from 'semantic-ui-react'
Do this:
import { PinptBaseComponents } from 'pinpt-react-components';
const { Button } = PinptBaseComponents;
Charts.js
This component library wraps the React ChartJS library.
import { PinptCharts } from 'pinpt-react-components';
{ Doughnut } = PinptCharts
<Doughnut data={...} />
Storybook View
To see all of the components in action, outside of your webapp, run npm run storybook
and visit http://localhost:9001/
.
Developing components
Create a New Component
To automatically generate a new component based on our internal template, run:
node generator -c MyComponentName
This script does the following:
- Creates a new component and the required files in the
/components/MyComponentName
directory - Adds the component to the packages export in
components/index.js
- Adds the component to the storyboard / component explorer
Testing
npm run test
License
All of this code is proprietary and Copyright © 2017-2019 by Pinpoint Software, Inc.