❤
npm
Sign UpSign In

text-size

0.0.1 • Public • Published

text-size

Small high performance library to get text width before render

Examples

  1. 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>
    );
  }
}
  1. 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>
    );
  }
});
  1. 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>

API

getTextWidth(config, type)

  • config - {text: String, fontSize: String, fontName: String}, required parameter
  • type: - optional parameter, can be 'canvas' or 'dom', 'dom' by default

Pefomance

For testing we use Macbook Pro 2015, Chrome 51

DOM

<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

Canvas

<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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.0.166latest

Version History

VersionDownloads (Last 7 Days)Published
0.0.166

Package Sidebar

Install

npm i text-size

Repository

github.com/Faradey27/text-size

Homepage

github.com/Faradey27/text-size

Weekly Downloads

66

Version

0.0.1

License

MIT

Last publish

Collaborators

  • faradey27
Try on RunKit
Report malware