0.3.3 • Published 4 years ago
jwe-components v0.3.3
JWE Components
Installation
Install via NPM:
npm i jwe-components --save
Dependencies
You will need to install and configure the react-native-svg npm package in order for this package to work.
npm i react-native-svg
Usage
At this point there are 3 components:
<JWE.Icon>,<JWE.Progress.Circle><JWE.Progress.Line>.
Progress Example
<JWE.Progress.Circle percentage="20" size="15" color="#000000" bkgdColor="#e8e8e8" lineWidth="2" /><JEW.Progress.Line percentage="20" size="15" color="#000000" bkgdColor="#e8e8e8" lineWidth="2" />
Props
| Prop | Default | Description |
|---|---|---|
| percentage | 0 | The percentage of progress the chart should display. |
| size | 60 | The width of the progress indicator in pixels. This sets the height and width. |
| color | #000000 | The HEX color value of the fill line. |
| bkgdColor | #e8e8e8 | The HEX color value of the background circle. |
| lineWidth | 2 | The width of the fill line. |
Icon Example
<JWE.Icon name="home" type="png" size={18} /><JWE.Icon name="home" type="svg" size={18} color="green" />
Props
| Prop | Default | Description |
|---|---|---|
| name | home | The name of the icon. |
| size | 10 | The width of the progress indicator in pixels. This sets the height and width. |
| color | black | Can be any one of black, white, gray, or green. Note: Only works with SVG images. |
| type | svg | Can be svg or png. Default to svg if left blank. |