dce-reactkit

A collections of simple tools and UI elements for quickly and easily building React-based apps.

Usage no npm install needed!

<script type="module">
  import dceReactkit from 'https://cdn.skypack.dev/dce-reactkit';
</script>

README

dce-reactkit

A collections of simple tools and UI elements for quickly and easily building React-based apps.

Quickstart

  1. Install dce-reactkit into your React project:
npm install dce-reactkit --save
  1. 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

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';