You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-percentage-circle

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-percentage-circle - npm Package Compare versions

Comparing version

1.0.5
to
1.0.6

.eslintignore
.eslintrc
bower.json
dist/react-percentage-circle.js
dist/react-percentage-circle.min.js
example/src/.npmignore
example/src/example.js
example/src/example.less
example/src/index.html
gulpfile.js
lib/ReactPercentageCircle.js
src/ReactPercentageCircle.js
webpack.config.js

66

package.json
{
"name": "react-percentage-circle",
"version": "1.0.5",
"description": "Percentage circle for react",
"keywords": [
"react",
"react-component",
"circle"
],
"version": "1.0.6",
"description": "React Percentage Circle",
"main": "lib/ReactPercentageCircle.js",
"author": "kenneth.jiang@gmail.com",
"homepage": "https://github.com/kennethjiang/react-percentage-circle",
"licenses": "MIT",
"repository": {
"type": "git",
"url": "git@github.com:kennethjiang/react-percentage-circle.git"
"url": "https://github.com/kennethjiang/react-percentage-circle.git"
},
"bugs": {
"url": "http://github.com/react-component/progress/issues"
"url": "https://github.com/kennethjiang/react-percentage-circle/issues"
},
"licenses": "MIT",
"main": "./dist/index.js",
"scripts": {
"build": "npm run clean && mkdir -p ./dist && babel src/index.js --out-file dist/index.js",
"clean": "rm -rf dist",
"prepublish": "npm run build"
"dependencies": {
"object-assign": "4.x",
"classnames": "^2.1.2"
},
"devDependencies": {
"babel-cli": "6.1.18",
"babel-preset-es2015": "6.1.18",
"babel-preset-react": "6.1.18",
"babel-preset-stage-0": "6.1.18",
"babel-eslint": "^4.1.3",
"eslint": "^1.6.0",
"eslint-plugin-react": "^3.5.1",
"gulp": "^3.9.0",
"gulp-header": "^1.2.2",
"gulp-jshint": "^1.9.4",
"gulp-plumber": "^1.0.0",
"gulp-react": "^3.0.1",
"gulp-rename": "^1.2.0",
"gulp-streamify": "0.0.5",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.4",
"webpack-stream": "^3.1.0",
"react": "^0.14.0",
"react-component-gulp-tasks": "^0.7.6",
"react-dom": "^0.14.0"
},
"dependencies": {
"object-assign": "4.x"
}
"peerDependencies": {
"react": "^0.14.0"
},
"browserify-shim": {
"react": "global:React"
},
"scripts": {
"build": "gulp clean && NODE_ENV=production gulp build",
"examples": "gulp dev:server",
"lint": "eslint ./; true",
"publish:site": "NODE_ENV=production gulp publish:examples",
"release": "NODE_ENV=production gulp release",
"start": "gulp dev",
"test": "echo \"no tests yet\" && exit 0",
"watch": "gulp watch:lib"
},
"keywords": [
"react",
"react-component"
]
}

122

README.md

@@ -1,121 +0,61 @@

# react-percentage-circle
---
# React Percentage Circle
progress ui component for react
__COMPONENT DESCRIPTION GOES HERE__
[![NPM version][npm-image]][npm-url]
[![SPM version](http://spmjs.io/badge/react-percentage-circle)](http://spmjs.io/package/react-percentage-circle)
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
## Demo & Examples
[npm-image]: http://img.shields.io/npm/v/react-percentage-circle.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-percentage-circle
[travis-image]: https://img.shields.io/travis/react-component/progress.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/progress
[coveralls-image]: https://img.shields.io/coveralls/react-component/progress.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/progress?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/progress.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/progress
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/react-percentage-circle.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-percentage-circle
Live demo: [KennethJiang.github.io/react-percentage-circle](http://KennethJiang.github.io/react-percentage-circle/)
## Screenshots
To build the examples locally, run:
<img src="https://t.alipayobjects.com/images/T12p8gXjpgXXXXXXXX.gif" />
```
npm install
npm start
```
Then open [`localhost:8000`](http://localhost:8000) in a browser.
## Feature
* support ie9+,chrome,firefox,safari
## Installation
### Keyboard
The easiest way to use react-percentage-circle is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
You can also use the standalone build by including `dist/react-percentage-circle.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
```
npm install react-percentage-circle --save
```
## install
[![react-percentage-circle](https://nodei.co/npm/react-percentage-circle.png)](https://npmjs.org/package/react-percentage-circle)
## Usage
```js
var Line = require('react-percentage-circle').Line;
var Circle = require('react-percentage-circle').Circle;
var React = require('react');
React.render(<div>
<Line percent=“10” strokeWidth="4" strokeColor=“#D3D3D3” />
<Circle percent=“10” strokeWidth="4" strokeColor=“#D3D3D3” />
</div>, container);
__EXPLAIN USAGE HERE__
```
var ReactPercentageCircle = require('react-percentage-circle');
## API
<ReactPercentageCircle>Example</ReactPercentageCircle>
```
### props
### Properties
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>strokeWidth</td>
<td>Number</td>
<td>1</td>
<td>Width of the stroke. Unit is percentage of SVG canvas size.</td>
</tr>
<tr>
<td>strokeColor</td>
<td>String</td>
<td>#3FC7FA</td>
<td> Stroke color.</td>
</tr>
<tr>
<td>trailWidth</td>
<td>Number</td>
<td>1</td>
<td>Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth are not defined, it same as strokeWidth.</td>
</tr>
<tr>
<td>trailColor</td>
<td>String</td>
<td>#D9D9D9</td>
<td> Color for lighter trail stroke underneath the actual progress path.</td>
</tr>
</tbody>
</table>
* __DOCUMENT PROPERTIES HERE__
## Development
### Notes
```
npm install
npm start
```
__ADDITIONAL USAGE NOTES__
## Example
http://localhost:8000/examples/
## Development (`src`, `lib` and the build process)
online example: http://react-component.github.io/progress/
**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
## Test Case
To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
http://localhost:8000/tests/runner.html?coverage
## License
## Coverage
__PUT LICENSE HERE__
http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
Copyright (c) 2016 Kenneth Jiang.
## License
react-percentage-circle is released under the MIT license.
.travis.yml
assets/index.less
examples/simple.html
examples/simple.js
HISTORY.md
index.js
src/Caption.jsx
src/defaultProps.js
src/index.js
src/Line.jsx
src/Progress.js
tests/index.spec.js
tests/runner.html
.editorconfig

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet