README
dce-reactkit
A collections of simple tools and UI elements for quickly and easily building React-based apps.
Quickstart
- Install
dce-reactkit
into your React project:
npm install dce-reactkit --save
- Import
dce-reactkit
components into your React component:
import Button from 'dce-reactkit/Button';
See the full list of components below:
Components by Type
Charts and Graphs
Bar
import Bar from 'dce-reactkit/Bar'
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
title | string | the title of the chart | null |
data | bars[] | the bar data to show: array of { name [string or number], value [number], color [string, overrides default color]} where color is optional |
required |
color | string | the default css color for the bars (e.g. '#123456' or 'white') | blue |
width | string or number | the css width of the chart (e.g. '100%' or 50) | 100% |
height | string or number | the css height of the chart (e.g. '100%' or 50) | 500px |
nameLabel | string | the label for the name axis (the axis that displays the names of the bars) | Name |
nameUnit | string | the unit for the name axis (the axis that displays the names of the bars) | null |
valueLabel | string | the label for the value axis (the axis along which the bars lie) | Value |
valueUnit | string | the unit for the value axis (the axis along which the bars lie) | null |
horizontal | boolean | if true, the bar chart is a horizontal bar chart (bars lie horizontally) | false |
noTooltipOnHover | boolean | if true, no tooltip is displayed when the user mouses over the chart | false |
showLegend | boolean | if true, legend is included | false |
noDownload | boolean | if true, no download button is shown | false |
csvContents | string | the contents of the csv file to download (we auto-generate a csv from the data if this is excluded) | auto-generated csv |
Donut
import Donut from 'dce-reactkit/Donut'
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
title | string | the title of the chart | null |
data | slice[] | an array of slices to place in the donut of the form. An array of: {name [string or number], value [number], color [string, overrides default color]} where color is optional |
required |
color | string | the default css color for the slices (e.g. '#123456' or 'white') or use 'assortment' for random colors | assortment |
width | string or number | the css width of the chart (e.g. '100%' or 50) | 100% |
height | string or number | the css height of the chart (e.g. '100%' or 50) | 500px |
noTooltipOnHover | boolean | if true, no tooltip is displayed when the user mouses over the chart | false |
showLegend | boolean | if true, legend is included | false |
noDownload | boolean | if true, no download button is shown | false |
Histogram
import Histogram from 'dce-reactkit/Histogram'
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
title | string | the title of the chart | null |
data | number[] | an array of numbers to chart in the histogram (they are sorted and put into buckets) | required |
color | string | the default css color for the bars (e.g. '#123456' or 'white') | blue |
width | string or number | the css width of the chart (e.g. '100%' or 50) | 100% |
height | string or number | the css height of the chart (e.g. '100%' or 50) | 500px |
startValue | number | the lowest value to start at (beginning of the first bucket) | 0 |
endValue | number | the highest valueto count (ending of the last bucket) | null (infinity) |
numBuckets | number | the number of buckets to divide the data into | 10 |
numDecimals | number | the number of decimals to display on the bucket axis. We recommend keeping this low for better formatting | 1 |
bucketLabel | string | the label for the bucket axis | Bucket |
bucketUnit | string | the unit for the bucket axis | null |
valueLabel | string | the label for the value axis | Num in Bucket |
valueUnit | string | the unit for the value axis | null |
noTooltipOnHover | boolean | if true, no tooltip is displayed when the user mouses over the chart | false |
showLegend | boolean | if true, legend is included | false |
noDownload | boolean | if true, no download button is shown | false |
Scatter
import Scatter from 'dce-reactkit/Scatter'
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
title | string | the title of the chart | null |
data | point[] | an array of points to plot. Array of: {x [number], y [number]} |
required |
color | string | the default css color for the points (e.g. '#123456' or 'white') | blue |
width | string or number | the css width of the chart (e.g. '100%' or 50) | 100% |
height | string or number | the css height of the chart (e.g. '100%' or 50) | 500px |
xLabel | string | label for the x axis | x-axis |
xUnit | string | unit for the x axis | null |
yLabel | string | label for the y axis | y-axis |
yUnit | string | unit for the y axis | null |
seriesName | string | the name of the series (included and required for the legend if showLegend is true) |
Chart |
noTooltipOnHover | boolean | if true, no tooltip is displayed when the user mouses over the chart | false |
showLegend | boolean | if true, legend is included | false |
noDownload | boolean | if true, no download button is shown | false |
Data and Utilities
DownloadButton
import DownloadButton from 'dce-reactkit/DownloadButton';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
text | string | text of the download button | Download |
filename | string | the name of the file once it's downloaded | required |
contents | string | the contents of the file to download | required |
large | boolean | if true, button is a bootstrap button | false |
marginLeft | number | the left margin of the button | null |
marginRight | number | the right margin of the button | null |
marginTop | number | the top margin of the button | null |
marginBottom | number | the bottom margin of the button | null |
Glyphs
To import glyphs, use the glyph
subfolder:
// Example:
import Arrow from 'dce-reactkit/glyph/Arrow';
Full list of glyphs:
- Adjust
- Angle
- Archive
- Arrow
- ArrowsHorizontal
- ArrowsVertical
- Award
- Ban
- Barcode
- Bed
- Bell
- Bolt
- Bookmark
- Bug
- Calendar
- Check
- Checkbox
- Chevron
- Circle
- Cog
- DoubleAngle
- Download
- Ellipsis
- Envelope
- File
- IdCard
- Menu
- Minus
- Move
- Plus
- Square
- Teacher
- TextAlign
- Times
- WarningTriangle
Adjust
This component looks like Font Awesome's adjust solid icon.
import Adjust from 'dce-reactkit/glyph/Adjust';
Angle
This component looks like Font Awesome's angle-up/down/right/left solid icon depending on its properties.
import Angle from 'dce-reactkit/glyph/Angle';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
direction | string | the direction of the angle. Choose from ['up', 'down', 'left', 'right'] |
right |
Archive
This component looks like Font Awesome's archive solid icon.
import Archive from 'dce-reactkit/glyph/Archive';
Arrow
This component looks like Font Awesome's arrow-up/down/right/left or arrow-circle/up/down/right/left solid icon depending on its properties.
import Arrow from 'dce-reactkit/glyph/Arrow';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
circled | boolean | if true, the arrow appears inside of a solid circle. | false |
direction | string | the direction of the arrow. Choose from ['up', 'down', 'left', 'right'] |
right |
ArrowsHorizontal
This component looks like Font Awesome's arrows-alt-h solid icon.
import ArrowsHorizontal from 'dce-reactkit/glyph/ArrowsHorizontal';
ArrowsVertical
This component looks like Font Awesome's arrows-alt-h solid icon.
import ArrowsVertical from 'dce-reactkit/glyph/ArrowsVertical';
Award
This component looks like Font Awesome's award solid icon.
import Award from 'dce-reactkit/glyph/Award';
Ban
This component looks like Font Awesome's ban solid icon.
import Ban from 'dce-reactkit/glyph/Ban';
Barcode
This component looks like Font Awesome's barcode solid icon.
import Barcode from 'dce-reactkit/glyph/Barcode';
Bed
This component looks like Font Awesome's bed solid icon.
import Bed from 'dce-reactkit/glyph/Bed';
Bell
This component looks like Font Awesome's bell or bell-slash icon depending on its properties.
import Bell from 'dce-reactkit/glyph/Bell';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
slashed | boolean | if true, the bell has a slash through it | false |
Bolt
This component looks like Font Awesome's bolt solid icon.
import Bolt from 'dce-reactkit/glyph/Bolt';
Bookmark
This component looks like Font Awesome's bookmark solid or bookmark-outlined regular icon depending on its properties.
import Bookmark from 'dce-reactkit/glyph/Bookmark';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
outlined | boolean | if true, the bookmark is outlined instead of filled | false |
Bug
This component looks like Font Awesome's bug solid icon.
import Bug from 'dce-reactkit/glyph/Bug';
Calendar
This component looks like Font Awesome's calendar solid icon.
import Calendar from 'dce-reactkit/glyph/Calendar';
Check
This component looks like Font Awesome's check solid icon.
import Check from 'dce-reactkit/glyph/Check';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
grow | number | the multiplicity to grow the checkmark by (if set to 2, we will apply bootstrap's 'grow-2' class) | null |
Checkbox
This component looks like Font Awesome's square or check-square solid icon depending upon its properties.
import Checkbox from 'dce-reactkit/glyph/Checkbox';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
checked | boolean | if true, the checkbox is checked | false |
grow | number | the multiplicity to grow the checkbox by (if set to 2, we will apply bootstrap's 'grow-2' class) | null |
Chevron
This component looks like Font Awesome's chevron-up/down/right/left or chevron-circle/up/down/right/left solid icon depending on its properties.
import Chevron from 'dce-reactkit/glyph/Chevron';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
circled | boolean | if true, the arrow appears inside of a solid circle. | false |
direction | string | the direction of the chevron. Choose from ['up', 'down', 'left', 'right'] |
right |
Circle
This component looks like Font Awesome's circle solid icon.
import Circle from 'dce-reactkit/glyph/Circle';
Cog
This component looks like Font Awesome's cog solid icon.
import Cog from 'dce-reactkit/glyph/Cog';
DoubleAngle
This component looks like Font Awesome's angle-double-up/down/right/left solid icon depending on its properties.
import DoubleAngle from 'dce-reactkit/glyph/DoubleAngle';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
direction | string | the direction of the double angle. Choose from ['up', 'down', 'left', 'right'] |
right |
Download
This component looks like Font Awesome's cloud-download-alt solid icon.
import Download from 'dce-reactkit/glyph/Download';
Ellipsis
This component looks like Font Awesome's ellipsis-h/v solid icon depending upon its properties.
import Ellipsis from 'dce-reactkit/glyph/Ellipsis';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
vertical | boolean | if true, the ellipsis is vertical | false |
Envelope
This component looks like Font Awesome's envelope solid icon.
import Envelope from 'dce-reactkit/glyph/Envelope';
File
This component looks like Font Awesome's file or file-csv solid icon depending upon its properties.
import File from 'dce-reactkit/glyph/File';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
type | string | the file type. Supported values: ['csv', null] |
null |
IdCard
This component looks like Font Awesome's id-card solid icon.
import IdCard from 'dce-reactkit/glyph/IdCard';
Menu
This component looks like Font Awesome's bars solid icon.
import Menu from 'dce-reactkit/glyph/Menu';
Minus
This component looks like Font Awesome's minus solid icon.
import Minus from 'dce-reactkit/glyph/Minus';
Move
This component looks like Font Awesome's arrows-alt solid icon.
import Move from 'dce-reactkit/glyph/move';
Plus
This component looks like Font Awesome's plus solid icon.
import Plus from 'dce-reactkit/glyph/Plus';
Square
This component looks like Font Awesome's square-filled solid or square regular icon depending upon its properties.
import Adjust from 'dce-reactkit/glyph/Adjust';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
filled | boolean | if true, the square is filled | false |
grow | number | the multiplicity to grow the square by (if set to 2, we will apply bootstrap's 'grow-2' class) | null |
Teacher
This component looks like Font Awesome's chalkboard-teacher solid icon.
import Teacher from 'dce-reactkit/glyph/Teacher';
TextAlign
This component looks like Font Awesome's align-center/left/right/justify solid icon depending upon its properties.
import TextAlign from 'dce-reactkit/glyph/TextAlign';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
left | boolean | if true, we display the align left icon | true |
right | boolean | if true, we display the align right icon | false |
justify | boolean | if true, we display the justify align icon | false |
center | boolean | if true, we display the align center icon | false |
Times
This component looks like Font Awesome's times solid icon.
import Times from 'dce-reactkit/glyph/Times';
Customize this component by setting its properties:
Property Name | Type | Description | Required/Default Value |
---|---|---|---|
grow | number | the multiplicity to grow the times icon by (if set to 2, we will apply bootstrap's 'grow-2' class) | null |
WarningTriangle
This component looks like Font Awesome's exclamation-triangle solid icon.
import WarningTriangle from 'dce-reactkit/glyph/WarningTriangle';