react-visual-graphic
0.2.0 • Public • Published react-visual-graphic
react visual graphic collections.
Quick example
Tag
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Tag = require('react-visual-graphic').Tag;
(function() {
ReactDOM.render(
<div>
<svg width= {300} height= {300}>
<Tag
width= {200}
height= {80}
text= {"Hello world!"}
color= {"green"}
textColor= {"#FFF"}
/>
</svg>
</div>
, document.getElementById('blank-tag')
)
})()
Battery
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Battery = require('react-visual-graphic').Battery;
(function() {
ReactDOM.render(
<div>
<svg width= {300} height= {300}>
<Battery
width= {200}
height= {100}
maxVal= {100}
value= {30}
color= {"green"}
batteryColor= {"#CCC"}
/>
</svg>
</div>
, document.getElementById('blank-battery')
)
})()
Meter
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Meter = require('../../lib/index').Meter;
(function() {
ReactDOM.render(
<div>
<svg width= {300} height= {400}>
<Meter
width= {150}
height= {400}
maxVal= {100}
value= {30}
color= {"blue"}
meterColor= {"#CCC"}
text= {"30%"}
/>
</svg>
</div>
, document.getElementById('blank-meter')
)
})()
License
Apache 2.0
Package Sidebar
Install
npm i react-visual-graphic
Weekly Downloads