VS-Number-Compare
Install:
yarn
yarn add @vivintsolar-oss/native-vs-number-compare
npm
npm install @vivintsolar-oss/native-vs-button
Usage Example
Check out this Expo Snack to see a live example.
Usage
There are three components that make up the number compare: Wrapper, Numbers, Legend
. The data for comparison should be passed into the Wrapper. The Legend and Number components allow you to specify which should be above and which should be below, along with allowing styling on those particular items.
// Legend above
<VSNumberCompare.Wrapper>
<VSNumberCompare.Legend />
<VSNumberCompare.Numbers />
</VSNumberCompare.Wrapper>
// Legend below
<VSNumberCompare.Wrapper>
<VSNumberCompare.Legend />
<VSNumberCompare.Numbers />
</VSNumberCompare.Wrapper>
Simple values with style overrides
const values = [
{
unit: 'win',
value: 12,
},
{
unit: 'loss',
value: 3,
},
];
<VSNumberCompare.Wrapper data={ values1 }>
<VSNumberCompare.Legend
style={{
fontSize: 16,
height: 16,
}}
/>
<VSNumberCompare.Numbers
style={{
fontSize: 72,
height: 72,
paddingTop: 1,
}}
/>
</VSNumberCompare.Wrapper>
Specify colors on the individual values to style individual numbers
const values = [
{
unit: 'ac',
value: 15,
color: 'red',
},
{
unit: 'wc',
value: 12,
color: 'white',
},
{
unit: 'sales (ps)',
value: 3,
color: 'blue',
},
];
<VSNumberCompare.Wrapper data={values}>
<VSNumberCompare.Legend />
<VSNumberCompare.Numbers />
</VSNumberCompare.Wrapper>