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

    Install

    npm i text-size

    DownloadsWeekly Downloads

    76

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • faradey27