React component for displaying seven segments
npm install react-7segmentsReact component for seven segments
npm install react-7segments --save
`bower
`
bower install react-7segments --save
`browser
`html
...
...
`nodejs
`javascript
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(
);
};
});
`Example
Live example$3
`jsx
var BasicEg = React.createClass({
render: function() {
return (
// [0][1][2][3][4][5][6][7][8][9]
// [ ] means one distinct 7segments-digit
);
}
});
`$3
- Dot has some exceptions because try to reflect real seven digits.
- Basically, dot doesn't reside in one distinct digit.
- eg) 12.34 --> [1][2.][3][4]- However, under the below conditions, it holds one digit.
- Dot is the first character.
- eg) .1234 --> [.][1][2][3][4]
- Dot's left character is a dot.
- eg) 1... --> [1.][.][.]
- Dot's left character is a space.
- eg) 12 .45 --> [1][2][.][4][5]
$3
- number
- alphabet: 'SEG' ( It has a relation with module name :) )
- special character: hyphen(-), lodash(_), dot(.), space( )$3
`jsx
var OptionsEg = React.createClass({
render: function() {
var options = {
size: 10,
align: 'left'
};
return (
// [1][2][3][4][5][ ][ ][ ][ ][ ]
);
}
});
`$3
`css
.custom-on-class {
fill: black;
}.custom-digit-class {
fill: #ddd;
background-color: white;
}
`
`jsx
var StyleEg = React.createClass({
render: function() {
var digitOptions = {
onClass: 'custom-on-class',
digitClass: 'custom-digit-class'
};
return (
// [1][2][3][4][5]
// background color is white and light-on part color is black -->
);
}
});
`$3
Allow to add custom segment pattern by passing it into options
`jsx
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 (
// [b][r][o]
// These are not provided basically
);
}
});
`$3
`jsx
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 (
//It has right angle at middle part
);
}
});
``