Hydrogen React Components

How to use

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <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>
      </header>
    </div>
  );
}

Example React App: https://github.com/hydrogen-dev/react-components-example

Charts

Small charts

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

*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

<GaugeChart value={0.87} />

Large Charts

AreaChart

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

AreaChart2

<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

*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"
/>

BarChart

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

Scatterplot 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

*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 primary>Primary</Button>

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

<Button>Default</Button>

Button.propTypes = {
  onClick: PropTypes.func,
  primary: PropTypes.any,
  action: PropTypes.string
}

Callouts

<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.propTypes = {
  primaryAction: PropTypes.func,
  secondaryAction: PropTypes.func,
  buttonTextPrimary: PropTypes.string,
  buttonTextSecondary: PropTypes.string
}

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.propTypes = {
  onChange: PropTypes.func,
  name: PropTypes.string,
  checked: PropTypes.bool,
  value: PropTypes.string,
  id: PropTypes.node
}

Dropdown

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

Dropdown.propTypes = {
  onChange: PropTypes.func,
  name: PropTypes.string,
  value: PropTypes.string,
  options: PropTypes.any.isRequired
}

Horizontal Bar Graph

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

VisualCardBarGraph.propTypes = {
  title: PropTypes.string,
  value1: PropTypes.number.isRequired,
  value2: PropTypes.number,
  value3: PropTypes.number,
  subtitle1: PropTypes.string.isRequired,
  subtitle2: PropTypes.string,
  subtitle3: PropTypes.string
}

Icons

*Size is a font-size property

<Icon size={30} name="analytics" />

Icon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.number
}

Insight Cards (responsive)

<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.propTypes = {
  icon: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.number,
  goal: PropTypes.number,
  onClick: PropTypes.func
}

InsightProfileCard.propTypes = {
  profile: PropTypes.string,
  time: PropTypes.string,
  best: PropTypes.number,
  worst: PropTypes.number,
  onClick: PropTypes.func
}

Insight Tabs

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

InsightTab.propTypes = {
  onClick: PropTypes.func,
  menuClick: PropTypes.func,
  label: PropTypes.string.isRequired,
  balance: PropTypes.number.isRequired,
  tracking: PropTypes.bool,
  selected: PropTypes.bool
}

InsightTabsContainer.propTypes = {
  onSelect: PropTypes.func
}

Lists and Tables

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

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

Finance Table

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

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

  <FinanceRow>
    <FinanceCellTicker>XEF</FinanceCellTicker>
    <FinanceCell>iShares Core</FinanceCell>
    <FinanceCellPercentage>5%</FinanceCellPercentage>
  </FinanceRow>

  <FinanceRow>
    <FinanceCellTicker>NFLX</FinanceCellTicker>
    <FinanceCell>Netflix</FinanceCell>
    <FinanceCellPercentage>20%</FinanceCellPercentage>
  </FinanceRow>
</FinanceTable>


FinanceHeaderRow.propTypes = {
  color: PropTypes.string
}

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>

CollapseTableHeaderRow.propTypes = {
  collapseId: PropTypes.string.isRequired,
  color: PropTypes.string
}

CollapseTableRow.propTypes = {
  parentId: PropTypes.string.isRequired
}

ColorListTable.propTypes = {
  data: PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.number,
    color: PropTypes.string
  })
}

Rating Stars

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

Rating.propTypes = {
  onChange: PropTypes.func
}

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.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string.isRequired,
  checked: PropTypes.bool,
  onChange: PropTypes.func.isRequired
}

Radio.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired
}

Recommendation Tabs (responsive)

<TabsWrapper>
  <RecommendationTab
  key='1'
  label='Increase monthly auto deposit to'
  target="$1820.00"
  current="$300.00"
  icon="Circle-Dollar"/>

  <RecommendationTab
  key='2'
  selected
  label='Add a one-time deposit of'
  target="$300.00"
  current="$20.00"
  icon="Circle-Dollar" />

  <RecommendationTab key='3' label='Increase retirement age to' target="26" current="20" icon="Circle-Dollar"/>
</TabsWrapper>

RecommendationTab.propTypes = {
  selected: PropTypes.any,
  icon: PropTypes.string,
  current: PropTypes.any,
  label: PropTypes.string,
  target: PropTypes.any
}

TabsWrapper.propTypes = {
  onSelect: PropTypes.func
}

Selection Cards

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

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

IconCard.propTypes = {
  onClick: PropTypes.func,
  icon: PropTypes.string.isRequired,
  label: PropTypes.string,
}

TextCard.propTypes = {
  onClick: PropTypes.func,
  top: PropTypes.string,
  option: PropTypes.string,
  bottom: PropTypes.string,
}

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'
  label2='Option 2'
  onChange={(position) => console.log('SliderCircle', position)}
/>

SliderBasic.propTypes = {
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
  tooltip: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
}

SliderGradient.propTypes = {
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
  tooltip: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
}

SliderCircle.propTypes = {
  onChange: PropTypes.func
}

SliderCircle.defaultProps = {
  position: 0,
  clickable: true,
  positionChangeListener: null
}

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>

Tab.propTypes = {
  onClick: PropTypes.func,
  label: PropTypes.string,
  key: PropTypes.number,
  selected: PropTypes.bool,
  size: PropTypes.PropTypes.oneOf(['large', 'small'])
}

TabsContainer.propTypes = {
  onSelect: PropTypes.func
}

TimeTab.propTypes = {
  onClick: PropTypes.func,
  label: PropTypes.string,
  key: PropTypes.number,
  selected: PropTypes.bool
}

Text Fields

<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.propTypes = {
  invalid: PropTypes.bool,
  placeholder: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func
}

SearchField.propTypes = {
  invalid: PropTypes.bool,
  placeholder: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
  onSubmit: PropTypes.func
}

DateFields.propTypes = {
  invalid: PropTypes.bool,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func
}

Tooltips

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

Tooltip.propTypes = {
  text: PropTypes.string,
  position: PropTypes.oneOf(['top', 'bottom'])
}