1.0.6 • Published 4 years ago
react-query-meter v1.0.6
react-query-meter
A query result visual meter.
Live Demo here
Install
npm install --save react-query-meterUsage
<QueryMeter
totalHits={totalHits}
maxHits={maxHits}
width={200}
thickness={25}
slices={6}
sliceGap={2}
duration={1000}
transitionTiming="cubic-bezier(.17,.67,.83,.67)"
backgroundColor="#fff"
fillColor="linear-gradient(315deg, #fff000 0%, #ed008c 74%)"
fillBackgroundColor="#eee"
containerSpacing={20}
strengthMode={true}
showInfo={true}
showPercentage={true}
topText="Total Hits: "
bottomText="Max Hits: "
percentageStyle={{}}
infoNumbersStyle={{}}
infoTextStyle={{}}
/>Props
| name | type | description | default value |
|---|---|---|---|
| totalHits | number | number of results | 0 |
| maxHits | number | the maximum number of possible results | 0 |
| width | number | the width of the meter (in pixels) | 200 |
| thickness | number | the thickness of the meter (in pixels) | 25 |
| slices | number | the number of meter slices | 6 |
| sliceGap | number | the spacing between slices (in pixels) | 2 |
| duration | number | the duration of the animation (in milliseconds) | 1000 |
| transitionTiming | string | the the timing function for the animation details | "cubic-bezier(.17,.67,.83,.67)" |
| backgroundColor | string | the background color for the meter's container | "#fff" |
| fillColor | string | the color of the meter | "linear-gradient(315deg, #fff000 0%, #ed008c 74%)" |
| fillBackgroundColor | string | the background color of the meter | "#eee" |
| containerSpacing | number | the space (in pixels) between the container and the meter, this prop is allowed only when showPercentage is true, otherwise it is equal to 0 | 20 |
| strengthMode | boolean | whether fewer results will be displayed as a stronger search query or not | true |
| showInfo | boolean | whether to display the maxHits and totalHits information in the center of the meter or not | true |
| showPercentage | boolean | whether to display the percentage calculation in the outer part of the meter or not | true |
| topText | string | the label for the total hits information | "Total Hits: " |
| bottomText | string | the label for the max hits information | "Max Hits: " |
License
© MIT