Circular Gauge
3 types Circular Slider Component for React Native.
Support type
-
Amount: amount of the total amount
-
Percent: percentages of total amount
-
Duration: start and end in total amount
Installation
npm install --save react-native-circular-slider-with-updates
or
yarn add react-native-circular-slider-with-updates
Peer Dependencies
- react-natie-reanimated(v2)
- react-native-gesture-handler
Example
Anatomy
The name refers to Material UI.
Usage
const [size, setSize] = useState(200);
const [amount, setAmount] = useState(25);
const [percents, setPercents] = useState([40, 30, 20, 10]);
const [duration, setDuration] = useState({
start: 10,
end: 50,
});
const [clockwise, setClockwise] = useState(true);
return (
<>
<AmountSlider
size={size}
amount={amount}
onChange={setAmount}
clockwise={clockwise}
/>
<PercentSlider
percents={percents}
size={size}
onChange={setPercents}
clockwise={clockwise}
/>
<DurationSlider
size={size}
duration={duration}
onChange={setDuration}
clockwise={clockwise}
/>
</>
);
Properties
Amount
Name |
Description |
Type |
Required |
Default |
amount |
|
number |
✅ |
|
thumbColor |
color of thumb |
string |
❌ |
#FFA500 |
thumbIcon |
Icon component to be displayed in the center of the thumb |
ReactNode |
❌ |
|
filledColor |
color of filled gauge |
string |
❌ |
#FFE5B4 |
onChange |
called when the amount value is changed |
function(amount: number) |
❌ |
|
Percent
Name |
Description |
Type |
Required |
Default |
percents |
|
number[] |
✅ |
|
thumbColor |
color of thumb |
string[] |
❌ |
#FFA500 |
thumbIcon |
Icon component to be displayed in the center of the thumb |
ReactNode[] |
❌ |
|
filledColor |
color of filled gauge |
string[] |
❌ |
#FFE5B4 |
onChange |
Called when the percents value is changed |
function(percents: number[]) |
❌ |
|
Duration
Name |
Description |
Type |
Required |
Default |
duration |
|
{start: number; end: number;} |
✅ |
|
thumbColor |
color of thumb |
string |
❌ |
#FFA500 |
thumbIcon |
Icon component to be displayed in the center of the thumb |
{start: ReactNode, end: ReactNode} |
❌ |
|
filledColor |
color of filled gauge |
string |
❌ |
#FFE5B4 |
onChange |
Called when the duration value is changed |
function(duration: {start: number; end: number;}) |
❌ |
|
Common
Name |
Description |
Type |
Required |
Default |
size |
size of slider |
number |
✅ |
|
clockwise |
rotation direction |
boolean |
❌ |
true |
Track Options
Name |
Description |
Type |
Required |
Default |
width |
width of track |
number |
❌ |
10% of size |
color |
color of track |
string |
❌ |
#7F8487 |
Tick Mark Options
Name |
Description |
Type |
Required |
Default |
Amount |
Percent |
Duration |
show |
If you need to render Tick Mark |
Boolean |
❌ |
false |
✅ |
✅ |
✅ |
total |
maximum value of slider |
Number |
❌ |
100 |
✅ |
❌ |
✅ |
unit |
Tick Mark division unit |
Number |
❌ |
5 |
✅ |
❌ |
✅ |
color |
color of Tick Mark |
String |
❌ |
#7F8487 |
✅ |
✅ |
✅ |
length |
legnth of Tick Mark |
Number |
❌ |
10 |
✅ |
✅ |
✅ |
thickness |
thickness of Tick Mark |
Boolean |
❌ |
2 |
✅ |
✅ |
✅ |
showText |
If you need to render Tick Mark units |
String |
❌ |
show option value |
✅ |
✅ |
✅ |
textSize |
size of text |
Number |
❌ |
10 |
✅ |
✅ |
✅ |
textColor |
color of text |
Number |
❌ |
#191919 |
✅ |
✅ |
✅ |
Reference
YouTuber William Candillon's "can-it-be-done-in-react-native" lecture was very helpful.
License
MIT