react-7segments


React component for seven segments

Usage

npm
``
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
);
}
});
``

LICENSE

MIT