Import Textblock for React

Hello! First of all, this framework seems pretty cool. Thank you for that!

But I have some problem using it in a React app.

Expected behaviour in App.js:

import React, { Component } from "react";
import "./App.scss";
import Textblock from "textblock";

class App extends Component {
  componentDidMount() {
    Textblock([
      {
        target: "h3",
        minWidth: 400,
        maxWidth: 800,
        minWidthFontSize: 18,
        maxWidthFontSize: 24,
        minWidthLineHeight: 1.33,
        maxWidthLineHeight: 1.2,
        units: "px"
      }
    ]);
  }

  render() {
    return
      <div className="App">
        <h3>This title scales perfectly based on Textblock</h3>
      </div>
    );
  }
}

export default App;

I guess this is the ES6 way to do it. This is mentioned here: https://github.com/glyphic-co/textblock/issues/7#issuecomment-364515428 Current behavior As it seems now, I have to do this in e.g. index.html the old fashioned way.

[billymoon]

I think a React importable component would be great, but I think some more changes should be made to suit the React paradigm. Perhaps the core functionality could be extracted into a shared file, and then a vanilla version and a react version can import the core. You could then add as many other flavours as you like when react is no longer the hottest thing in the world.

Steps to take to split into vanilla/react versions

1. extract all dom selector functionality into vanilla.js - react will handle it differently
2. extract onLoad functionality into vanilla.js - again, react will handle differently
3. write react component that imports core with api that allows passing refs to point to dom elements, and using render cycle to determine when to reflow text
4. write react hook to handle resize events, and trigger re-render
5. put some simple build system in place to compile browser versions of both vanilla and react

[FredrikSigvartsen]

@tinymachine , this solves the current problem. I just want to leave the solution for others to see:

Expected behaviour in App.js:

import React, { Component } from "react";
import "./App.scss";
import "textblock";

class App extends Component {
  componentDidMount() {
    window.Textblock([
      {
        target: "h3",
        minWidth: 400,
        maxWidth: 800,
        minWidthFontSize: 18,
        maxWidthFontSize: 24,
        minWidthLineHeight: 1.33,
        maxWidthLineHeight: 1.2,
        units: "px"
      }
    ]);
  }

  render() {
    return
      <div className="App">
        <h3>This title scales perfectly based on Textblock</h3>
      </div>
    );
  }
}

export default App;

But I guess the expected behaviour is still my last post, using ES6 Modules. But the solution above will definitely work for now.