Small high performance library to get text width before render
- With React es6 style
import React from 'react';
import textSize from 'text-size';
class TextComponent extends React.Component {
render() {
return (
<span>
Text width: {textSize.getTextWidth({text: 'Some text', fontSize: 17, fontName: 'Arial'})}
</span>
);
}
}
- With React es5 style
var React = require('react');
var textSize = require('text-size');
var TextComponent = React.createClass({
render: function() {
return (
<span>
Text width: {textSize.getTextWidth({text: 'Some text', fontSize: 17, fontName: 'Arial'})}
</span>
);
}
});
- With simple html file
<html>
<head>
</head>
<body>
<script src="textSize.js"></script>
<script>
console.log(textSize.getTextWidth({text: 'Some text', fontSize: 17, fontName: 'Arial'}));
</script>
</body>
</html>
config
- {text: String, fontSize: String, fontName: String}, required parametertype
: - optional parameter, can be 'canvas' or 'dom', 'dom' by default
For testing we use Macbook Pro 2015, Chrome 51
<html>
<head>
</head>
<body>
<script src="textSize.js"></script>
<script>
var startTime = Date.now();
for (var i = 0; i < 10000; i++) {
textSize.getTextWidth({text: 'Some text', fontSize: 17, fontName: 'Arial'})
}
console.log('Time:', Date.now() - startTime);
</script>
</body>
</html>
take 35-50ms
<html>
<head>
</head>
<body>
<script src="textSize.js"></script>
<script>
var startTime = Date.now();
for (var i = 0; i < 10000; i++) {
textSize.getTextWidth({text: 'Some text', fontSize: 17, fontName: 'Arial'}, 'canvas')
}
console.log('Time:', Date.now() - startTime);
</script>
</body>
</html>
take 25-45ms