Skip to content
Hydrogen React Components - Open Source Project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
img
src
test create react components for npm May 14, 2019
.babelrc create react components for npm May 14, 2019
.gitignore create react components for npm May 14, 2019
.npmignore create react components for npm May 14, 2019
LICENSE
README.md
doczrc.js create react components for npm May 14, 2019
package.json
rollup.config.js
webpack.config.js
yarn.lock create react components for npm May 14, 2019

README.md

Hydrogen Element React Components

Available on npm

npm install @hydrogenapi/react-components

Example React App

How to use

import { VisualCardBarGraph } from '@hydrogenapi/react-components'

function App() {
  return (
    <div className="App">
        <VisualCardBarGraph
          title="Savings Progress"
          value1={65} subtitle1={'Wedding'}
          value2={110} subtitle2={'Car'}
          value3={40} subtitle3={'House'}
        />
    </div>
  );
}

Charts

Small charts

Small Area Chart

Small Area Chart

 <AreaChart small width={100} height={50} data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { deposits: 10000 } },
    { date: new Date('2019-02-01T00:00:00.000Z'), price: { deposits: 13000 } },
    { date: new Date('2019-03-01T00:00:00.000Z'), price: { deposits: 18000 } }
   ]}
 />

Small Line Chart

Small Line Chart

*Must use ChartWrapperForLineChart

<ChartWrapperForLineChart small width={200} height={100} data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 5000 } },
    { date: new Date('2019-01-02T00:00:00.000Z'), price: { one: 2800 } },
    { date: new Date('2019-01-03T00:00:00.000Z'), price: { one: 9000 } },
    { date: new Date('2019-01-04T00:00:00.000Z'), price: { one: 8600 } },
    { date: new Date('2019-01-05T00:00:00.000Z'), price: { one: 7800 } }
  ]}
>
  <LineChart over="one" curve="cardinal" color="#3ba669" />
</ChartWrapperForLineChart>

Gauge Chart

Gauge Chart

<GaugeChart value={0.87} />

Large Charts

Area Chart

Area Chart Style 1

<AreaChart
  width={800}
  height={400}
  data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { lower: 0, low: 0, average: 0, high: 0, higher: 0 } },
    { date: new Date('2019-01-01T01:00:00.000Z'), price: { lower: 0.3 * 1000, low: 0.6 * 1000, average: 1000, high: 1.4 * 1000, higher: 1.7 * 1000  } },
    { date: new Date('2019-01-01T02:00:00.000Z'), price: { lower: 0.3 * 2500, low: 0.6 * 2500, average: 2500, high: 1.4 * 2500, higher: 1.7 * 2500  } },
    { date: new Date('2019-01-01T03:00:00.000Z'), price: { lower: 0.3 * 4500, low: 0.6 * 4500, average: 4500, high: 1.4 * 4500, higher: 1.7 * 4500  } },
    { date: new Date('2019-01-01T04:00:00.000Z'), price: { lower: 0.3 * 7000, low: 0.6 * 7000, average: 7000, high: 1.4 * 7000, higher: 1.7 * 7000  } },
    { date: new Date('2019-01-01T05:00:00.000Z'), price: { lower: 0.3 * 10000, low: 0.6 * 10000, average: 10000, high: 1.4 * 10000, higher: 1.7 * 10000  } }
  ]}
>
</AreaChart>

Area Chart 2

Area Chart Style 2

<AreaChart2
  width={800}
  height={400}
  data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { deposits: 10000, earnings: 10000 + 7000 } },
    { date: new Date('2019-02-01T00:00:00.000Z'), price: { deposits: 13000, earnings: 13000 + 8000 } },
    { date: new Date('2019-03-01T00:00:00.000Z'), price: { deposits: 18000, earnings: 18000 + 8000 } },
    { date: new Date('2019-04-01T00:00:00.000Z'), price: { deposits: 20000, earnings: 20000 + 9000 } }
  ]}
>
</AreaChart2>

Donut Chart

Donut Chart 1 Donut Chart 2

*To display legend:

legend="left"   
legend="bottom"   

*To display floating labels, add prop showFloatingLabels:

<DonutChart
  width={600}
  height={400}
  data={[
    { label: 'Label 1', value: 0.1, color: '#ffa600' },
    { label: 'Label 2', value: 0.2, color: '#f95d6a' },
    { label: 'Label 3', value: 0.2, color: '#a05195' },
    { label: 'Label 4', value: 0.2, color: '#665191' },
    { label: 'Label 5', value: 0.3, color: '#2f4b7c' }
  ]}
  showFloatingLabels
  legend="left"
/>

Stacked Bar Chart

Stacked Bar Chart

<BarChart
  width={800}
  height={400}
  data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 2400, two: 800, sum: 3200 } },
    { date: new Date('2019-02-01T00:00:00.000Z'), price: { one: 3200, two: 800, sum: 4000 } },
    { date: new Date('2019-03-01T00:00:00.000Z'), price: { one: 4000, two: 800, sum: 4800 } },
    { date: new Date('2019-04-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-05-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-06-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-07-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-08-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-09-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-10-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-11-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
    { date: new Date('2019-12-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } }
  ]}
  colors={['#d45087', '#665191']}
>
</BarChart>

Scatter Plot Chart

Scatter Plot Chart

<ScatterChart
  width={800}
  height={400}
  data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 100 } },
    { date: new Date('2019-01-01T01:00:00.000Z'), price: { one: 200 } },
    { date: new Date('2019-01-01T02:00:00.000Z'), price: { one: 300 } },
    { date: new Date('2019-01-01T03:00:00.000Z'), price: { one: 250 } },
    { date: new Date('2019-01-01T04:00:00.000Z'), price: { one: 300 } },
    { date: new Date('2019-01-01T05:00:00.000Z'), price: { one: 500 } },
    { date: new Date('2019-01-01T06:00:00.000Z'), price: { one: 170 } }
  ]}
>
</ScatterChart>

Line Chart

Line Chart

*Must use ChartWrapperForLineChart, Hover and ChartTooltip components

import { Hover, ChartTooltip, ChartWrapperForLineChart, LineChart } from '@hydrogenapi/react-components'

<ChartWrapperForLineChart
  width={800}
  height={400}
  data={[
    { date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 5000, two: 5500 } },
    { date: new Date('2019-01-02T00:00:00.000Z'), price: { one: 2800, two: 3000 } },
    { date: new Date('2019-01-03T00:00:00.000Z'), price: { one: 9000, two: 5400 } },
    { date: new Date('2019-01-04T00:00:00.000Z'), price: { one: 8600, two: 5200 } },
    { date: new Date('2019-01-05T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-06T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-07T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-08T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-09T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-10T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-11T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-12T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-13T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-14T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
    { date: new Date('2019-01-15T00:00:00.000Z'), price: { one: 7800, two: 5000 } }
  ]}
>
  <LineChart over="one" curve="cardinal" showPoints color="#a05195" />
  <LineChart over="two" curve="cardinal" showPoints color="#ff7c43" />
  <Hover
    render={({ x, y, d }) =>
      <g>
        <ChartTooltip
          x={x(d.date)}
          y={y(d.price.one)}
        >
          ${d.price.one}
        </ChartTooltip>

        <ChartTooltip
          x={x(d.date)}
          y={y(d.price.two)}
        >
          ${d.price.two}
        </ChartTooltip>
      </g>
    }
  />
</ChartWrapperForLineChart>

Components

*Below you will find information about each individual component and an example usage
*Include import '@hydrogenapi/react-components/build/bundle.css' in app entry point for css

Button

Button

<Button primary>Primary</Button>

<Button action="true">Action Button</Button>

<Button>Default</Button>

Button Props

Property Type Required
onClick Func false
primary Any false
action String false

Callout

Callout

<Callout
  buttonTextPrimary="Action Item 1"
  buttonTextSecondary="Action Item 2"
  primaryAction={() => alert('Primary')}
  secondaryAction={() => alert('Secondary')}>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Callout>

<Callout buttonTextPrimary="Action Item 1" small>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Callout>

Callout Props

Property Type Required
primaryAction Func false
secondaryAction Func false
buttonTextPrimary String false
buttonTextSecondary String false

Cells

Cells

<CellGroup>
  <Cell id={1} value="Top" name="color" onChange={(v) => console.log(v.target.value)}>Top Cell</Cell>
  <Cell id={2} value="Mid" name="color" onChange={(v) => console.log(v.target.value)}>Middle Cell</Cell>
  <Cell id={3} value="Bot" name="color" onChange={(v) => console.log(v.target.value)}>Bottom Cell</Cell>
</CellGroup>

Cell Props

Property Type Required
onChange Func false
name String false
checked Bool false
value String false
id Node false

Dropdown

Dropdown

<Dropdown
  options={[{value: 'red', name: 'Red'}, {value: 'blue', name: 'Blue'}, {value: 'green', name: 'Green'}]}
  label="Colors of Rainbow"
  name="colors"
/>

Dropdown Props

Property Type Required
options Any true
onChange Func false
name String false
value String false

Horizontal Bar Graph

Horizontal Bar Graph

<VisualCardBarGraph
  title="Savings Progress"
  value1={64} subtitle1={'Subtitle1'}
  value2={120} subtitle2={'Subtitle2'}
  value3={100} subtitle3={'Subtitle3'}
/>

VisualCardBarGraph Props

Property Type Required
title String false
value1 Number true
value2 Number false
value3 Number false
subtitle1 String true
subtitle2 String false
subtitle3 String false

Insight Cards

Insight Cards

<InsightIconCard label='Education' value={230000} goal={400000} icon="education" />

<InsightProfileCard
  profile="Investment Profile 1"
  time="2-5 years"
  best={132000}
  worst={400}
  average={3400}
  onClick={() => alert('View Portfolio')}
/>

InsightIconCard Props

Property Type Required
icon String false
color Any false
label String false
value Number false
goal Number false
onClick Func false

InsightProfileCard Props

Property Type Required
profile String false
time String false
best Number false
worst Number false
onClick Func false

Insight Tabs

Insight tabs

<InsightTabsContainer
  onSelect={tab => console.log(tab)}
  defaultActiveTab="Goal Name Long"
>
<InsightTab label="Goal Name" balance={230000} tracking={true} selected={true} />
<InsightTab label="Goal Name Long" balance={230000} tracking={true} />
</InsightTabsContainer>

InsightTabsContainer Props

Property Type Required
defaultActiveTab String false
onSelect Func false

InsightTab Props

Property Type Required
label String true
onClick Func false
balance Number false
tracking Bool false
selected Bool false

Lists and Tables

Simple Table

Simple Table

<SimpleTableTable>
  <SimpleTableTableRow>
    <SimpleTableTableHeader>Title of Column1</SimpleTableTableHeader>
    <SimpleTableTableHeader>Title of Column2</SimpleTableTableHeader>
  </SimpleTableTableRow>

  <SimpleTableTableRow>
    <SimpleTableTableCell>Title</SimpleTableTableCell>
    <SimpleTableTableCell>Value</SimpleTableTableCell>
  </SimpleTableTableRow>  
</SimpleTableTable>

Color List Table

Color List Table

<ColorListTable data={[{label: 'Label1', value: 60, color: '#A05195'}, {label: 'Label2', value: 40, color: '#F95D6A'}]}>
  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>25%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>15%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>10%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>10%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>20%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>15%</ColorListTableCell>
  </ColorListTableRow>

  <ColorListTableRow>
    <ColorListTableCell>Default</ColorListTableCell>
    <ColorListTableCell>5%</ColorListTableCell>
  </ColorListTableRow>
</ColorListTable>

ColorListTable Props

Property Type Required
data Array false
label string false
value number false
color string false

Finance Table

Finance Table

<FinanceTable>
  <FinanceHeaderRow color={"blue"}>
    <FinanceHeaderTitle>International Equities</FinanceHeaderTitle>
    <FinanceHeaderPercentage>25%</FinanceHeaderPercentage>
  </FinanceHeaderRow>

  <FinanceRow>
    <FinanceCellTicker>IEFA</FinanceCellTicker>
    <FinanceCell>iShares Core MSCI EAFE</FinanceCell>
    <FinanceCellPercentage>20%</FinanceCellPercentage>
  </FinanceRow>

  <FinanceRow>
    <FinanceCellTicker>NSRGY</FinanceCellTicker>
    <FinanceCell>Nestle SA</FinanceCell>
    <FinanceCellPercentage>5%</FinanceCellPercentage>
  </FinanceRow>

</FinanceTable>

FinanceTable FinanceHeaderRow Props

Property Type Required
color String false

Collapse Table

Collapse Table

<CollapseTable>
  <CollapseTableTitleRow>
    <CollapseTableTitle>Category Title</CollapseTableTitle>
    <CollapseTableTitle>Value</CollapseTableTitle>
    <CollapseTableTitle>Percentage</CollapseTableTitle>
    <CollapseTableTitle>Earnings</CollapseTableTitle>
  </CollapseTableTitleRow>

  <CollapseTableHeaderRow color={'#2F4B7C'} collapseId={'income'}>
    <CollapseTableRowHeader>Fixed Income</CollapseTableRowHeader>
    <CollapseTableRowHeader>15000</CollapseTableRowHeader>
    <CollapseTableRowHeader>39</CollapseTableRowHeader>
    <CollapseTableRowHeader>343</CollapseTableRowHeader>
  </CollapseTableHeaderRow>

  <CollapseTableRow parentId={'income'}>
    <CollapseTableCell>Netflix</CollapseTableCell>
    <CollapseTableCell>14000</CollapseTableCell>
    <CollapseTableCell>12</CollapseTableCell>
    <CollapseTableCell>300</CollapseTableCell>
  </CollapseTableRow>

  <CollapseTableRow parentId={'income'}>
    <CollapseTableCell>Microsoft</CollapseTableCell>
    <CollapseTableCell>2000</CollapseTableCell>
    <CollapseTableCell>2</CollapseTableCell>
    <CollapseTableCell>400</CollapseTableCell>
  </CollapseTableRow>

  <CollapseTableRow parentId={'income'}>
    <CollapseTableCell>Tesla</CollapseTableCell>
    <CollapseTableCell>9000</CollapseTableCell>
    <CollapseTableCell>49</CollapseTableCell>
    <CollapseTableCell>8200</CollapseTableCell>
  </CollapseTableRow>
</CollapseTable>

CollapseTable CollapseTableHeaderRow Props

Property Type Required
collapseId String true
color String false

CollapseTable CollapseTableRow Props

Property Type Required
parentId String true

Rating Stars

Rating Stars

<Rating onChange={(evt) => console.log(evt.target.value)}/>

Rating Props

Property Type Required
onChange Func false

Radio and Checkbox

Radio and Checkbox

<RadioGroup>
  <Radio id={1} value="Top" name="radios" onChange={(v) => console.log(v.target.value)}>Default</Radio>
  <Radio id={2} value="Bot" name="radios" onChange={(v) => console.log(v.target.value)}>Selected</Radio>
</RadioGroup>

<CheckboxGroup>
  <Checkbox id={3} value="Top" name="boxes" onChange={(v) => console.log(v.target.value)}>Default</Checkbox>
  <Checkbox id={4} value="Bot" name="boxes" onChange={(v) => console.log(v.target.value)}>Selected</Checkbox>
</CheckboxGroup>

Checkbox Props

Property Type Required
name String true
onChange Func true
type String false
checked Bool false

Radio Props

Property Type Required
name String true
onChange Func true
type String false

Recommendation Tabs (responsive)

Recommendation Tabs

<TabsWrapper
  color="red"
  iconColor="green"
  onSelect={tab => console.log(tab)}
  defaultActiveTab="Increase retirement age to"
>
  <RecommendationTab
    label="Increase monthly auto deposit to"
    target="$1820.00"
    current="$300.00"
    icon="circle-dollar"
  />
  <RecommendationTab
    label="Add a one-time deposit of"
    target="$300.00"
    current="$20.00"
    icon="piggy-bank"
  />
  <RecommendationTab
    label="Increase retirement age to"
    target="26"
    current="20"
    icon="circle-dollar"
  />
</TabsWrapper>

TabsWrapper Props

Property Type Required
onSelect Func false
color Any false
iconColor Any false
defaultActiveTab String false

RecommendationTab Props

Property Type Required
icon String false
current Any false
label String false
target Any false
selected Any false

Selection Cards

Selection Cards

<IconCard label='Quick to React' icon="piggy-bank" />

<TextCard top="Label" option="Option 1" bottom="label 1" />

IconCard Props

Property Type Required Default
icon String true -
color Any false lightgrey
onClick Func false -
label String false -

TextCard Props

Property Type Required Default
color Any false lightgrey
onClick Func false -
top String false -
bottom String false -
option String false -

Sliders

Sliders *Must include import 'react-rangeslider/lib/index.css' in file with sliders to use css

<SliderBasic
  min={1}
  max={100}
  default={10}
  step={1}
  tooltip={false}
  onChange={(evt) => console.log('SliderBasic', evt)}
/>

<SliderBasic min={10} max={100} default={1} step={10} disabled />

<SliderGradient
  label1="Option 1"
  label2="Option 2"
  tooltip={true}
  onChange={(evt) => console.log('SliderGradient', evt)}
/>

<SliderCircle
  label1="Option 1"
  postion="1"
  label2="Option 2"
  clickable="false"
  onChange={position => console.log('SliderCircle', position)}
  tooltip={true}
  tooltipArray={[
    'One',
    'Two',
    'Three',
    'Four',
    'Five',
    'Six',
    'Seven',
    'Eight',
    'Nine',
    'Ten',
  ]}
/>

SliderBasic Props

Property Type Required
min Number true
max Number true
step Number true
tooltip Bool false
disabled Bool false
onChange Func false

SliderGradient Props

Property Type Required
min Number true
max Number true
step Number true
tooltip Bool false
tooltipArray Array false
disabled Bool false
onChange Func false

SliderCircle Props

Property Type Required
tooltip Bool false
tooltipArray Array false
onChange Func false

Tab Selectors

Tab Selectors

<TabsContainer onSelect={(key) => console.log(key)}>
  <Tab size="small" label="Item Selected" />
  <Tab size="small" label="Item Middle"   />
  <Tab size="small" label="Item Right" />
</TabsContainer>

<TabsContainer>
  <Tab size="large" label="Item Left"  />
  <Tab size="large" label="Item Middle" />
  <Tab size="large" label="Item Right" />
</TabsContainer>

<TimeTabsContainer onSelect={(key) => console.log(key)}>
  <TimeTab label="1D" />
  <TimeTab label="1M" />
  <TimeTab label="1Y" />
  <TimeTab label="SY" />
</TimeTabsContainer>

TabsContainer Props

Property Type Required
onSelect Func false

Tab Props

Property Type Required
onClick Func false
label String false
selected Bool false
size "large" or "small" false

TimeTabsContainer Props

Property Type Required
onSelect Func false

TimeTab Props

Property Type Required
onClick Func false
label String false
selected Bool false

Text Fields

Text Search Date

<TextField placeholder="Default" name="text1"/>

<TextField placeholder="Enter your name..." name="text2" label="First Name"/>

<TextField error="This is an example of error text." name="text4" label="Error" invalid />

<SearchField />

<DateFields />

TextField Props

Property Type Required
invalid Bool false
placeholder String false
name String false
label String false
onChange Func false

SearchField Props

Property Type Required
placeholder String false
name String false
label String false
onChange Func false
onSubmit Func false

DateFields Props

Property Type Required
onChange Func false

Tooltip

Tooltip

<Tooltip text='5 or more characters' position='bottom'>Hover me! (Bottom)</Tooltip>

Tooltip Props

Property Type Required
text string false
position "top" or "bottom" false

Copyright & License

Copyright 2019 The Hydrogen Technology Corporation under the MIT License.

You can’t perform that action at this time.