react-7segments
Advanced tools
React component for seven segments
npm
npm install react-7segments --save
bower
bower install react-7segments --save
browser
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<div id="demo"></div>
<script src="//fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="//fb.me/react-dom-0.14.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="bower_components/react-7segments/react-7segments.js"></script>
<script type="text/babel">
var SegGroup = React7Seg.Group; // can access by global variable 'React7Seg'
ReactDOM.render(
<SegGroup value="1234" />, // [1][2][3][4]
document.getElementById('demo')
);
</script>
</body>
</html>
nodejs
import React7Seg from 'react-7segments';
import React from 'react';
const SegGroup = React7Seg.Group;
//or import SegGroup from 'react-7segments/src/components/SegGroup.jsx';
export default React.createClass({
render: function(){
return(
<SegGroup value="1234" />
);
};
});
Live example
var BasicEg = React.createClass({
render: function() {
return (
<SegGroup value="0123456789" />
// [0][1][2][3][4][5][6][7][8][9]
// [ ] means one distinct 7segments-digit
);
}
});
Dot has some exceptions because try to reflect real seven digits.
Basically, dot doesn't reside in one distinct digit.
However, under the below conditions, it holds one digit.
var OptionsEg = React.createClass({
render: function() {
var options = {
size: 10,
align: 'left'
};
return (
<SegGroup {...options} value="12345" />
// [1][2][3][4][5][ ][ ][ ][ ][ ]
);
}
});
.custom-on-class {
fill: black;
}
.custom-digit-class {
fill: #ddd;
background-color: white;
}
var StyleEg = React.createClass({
render: function() {
var digitOptions = {
onClass: 'custom-on-class',
digitClass: 'custom-digit-class'
};
return (
<SegGroup digitOptions={digitOptions} value="12345" />
// [1][2][3][4][5]
// background color is white and light-on part color is black -->
);
}
});
Allow to add custom segment pattern by passing it into options
const SegMap = React7Seg.Map;
const SegUtil = React7Seg.Util;
var PatternEg = React.createClass({
render: function() {
var customPatterns = {
'r' : SegUtil.arrToSegNum([0, 0, 0, 0, 1, 0, 1]);
'o' : SegUtil.arrToSegNum([0, 0, 1, 1, 1, 0, 1]);
'b' : SegUtil.arrToSegNum([0, 0, 1 ,1 ,1, 1, 1]);
var customMap = _.assign({}, SegMap, customPatterns); // use lodash.assign
return (
<SegGroup map={customMap} value="bro" />
// [b][r][o]
// These are not provided basically
);
}
});
const SegPoints = React7Seg.Points;
var ShapeEg = React.createClass({
render: function() {
var customPoints = SegPoints.slice(); //will clone SegPoints
customPoints[1] = "38 11, 43 6, 48 11, 48 39, 43 39, 38 34";
customPoints[2] = "38 46, 43 41, 48 41, 48 69, 43 74, 38 69";
customPoints[4] = "0 41, 5 41, 10 46, 10 69, 5 74, 0 69";
customPoints[5] = "0 11, 5 6, 10 11, 10 34, 5 39, 0 39";
var digitOptions = {
points: customPoints
};
return (
<SegGroup digitOptions={digitOptions} value="1234" />
//It has right angle at middle part
);
}
});
FAQs
React component for displaying seven segments
We found that react-7segments demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.