vroi-custom-components

Visualize ROI Boilerplate for npm 🤨

React Boilerplate Custom Component

---

Table of Contents 📖

1. Inputs.
2. Select Dropdown.
3. Range Slider.
4. Buttons.
5. Switch Buttons.
6. HighCharts.
7. Tooltip.
8. Outputs.
9. Information Box.
10. Header.
11. Custom Modal.

---

Inputs

i) Input:

import { Input1 } from "vroi-custom-components";

<Input1 title="How many countries in the world" value={var1} onChange={(e) => {setVar1(e.target.value);  }} />

---

Select Dropdown:

i) Select:

import { Select1 } from "vroi-custom-components";

const options = { "option 1 ": 1, "option 2 ": 2, "option 3 ": 3 };

<Select1 title="How many countries in the world" options={options}  selected={"2"}  onChange ={ e => { alert('test') }} />

---

Range Slider:

i) Range:

import { Slider1 } from "vroi-custom-components";

<Slider1 value={var} onChange={(e) => setVar(e.target.value)} />

---

Buttons:

i) Button:

import { Button1 } from "vroi-custom-components";

<Button1 backgroundColor="#203661" text={"Get your report"} onClick={() => ''} />

ii) Button2:

import { Button2 } from "vroi-custom-components";

<Button2 backgroundColor="#203661" text="Get your report" onClick={() => ''} />

iii) Button3:

import { Button3 } from "vroi-custom-components";

<Button3 backgroundColor="#203661" text="Assumption" onClick={() => ''} />

iV) Button4:

import { Button4 } from "vroi-custom-components";

<Button4 backgroundColor="#203661" text="Assumption" onClick={() => ''} />

V) Button5:

import { Button5 } from "vroi-custom-components";

<Button5 backgroundColor="#203661" text="Assumption" onClick={() => ''} />

---

Switch Buttons.

i) Switch Button:

import { SwitchButton } from "vroi-custom-components";

 <SwitchButton value="1" onClick={(e) => ''} />

---

ii) Switch2 Button:

import { SwitchButton2 } from "vroi-custom-components";

<SwitchButton2 backgroundColor="red" value="1" onClick={(e) => ''} />

---

HighCharts.

i) Chart1:

import { Chart1 } from "vroi-custom-components";

const titles = ['item1' , 'item2' , 'item3'];
const values = [ 12 , 32 , 21 ];
const colors = ['#123212' , 'black' , 'pink'];

<Chart1 titles={titles} values={values} colors={colors} prefix={"$"} postfix={"M"}  />

---

i) Chart2:

import { Chart2 } from "vroi-custom-components";

const titles = ['item1' , 'item2' , 'item3'];
const values = [ 12 , 32 , 21 ];
const colors = ['#123212' , 'black' , 'pink'];

<Chart2 titles={titles} values={values} colors={colors} prefix={"$"} postfix={"M"}  />

---

Outputs.

i) Output:

import { Output1 } from "vroi-custom-components";

<Output1 title="TOTAL BUSINESS BENEFIT" value="$1,600,000" backgroundColor="red" />

---

Information Box.

import { Instruction } from "vroi-custom-components";

<Instruction  title="Instructions" backgroundColor="red" description="To explore your total value gained, select the value drivers below."  />

---

Headers

import { Headers } from "vroi-custom-components";


<Headers  title="xyz" />
<Headers backgroundColor="#7B61FF" title="xyz"  />
<Headers backgroundColor="#DDE0E9" title="xyz"  />

---

Modals

import { ModalLoader } from "vroi-custom-components";


<ModalLoader show={true} text="PREPARING YOUR REPORT" />

---