ReactFittext doesn't work with the latest react version (0.14.0-rc1).
Here's the code and error messages:

package.json:

  "dependencies": {
    "react": "^0.14.0-rc1",
    "react-dom": "^0.14.0-rc1",
    "react-fittext": "0.0.5"
  }

main.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFitText from 'react-fittext';

const el = document.getElementById('root');

ReactDOM.render(
  <ReactFitText>
    <h1>hello</h1>
  </ReactFitText>,
  el
);

Console messages:

Warning: Failed propType: Invalid prop `children` supplied to `ReactFitText`, expected a ReactElement.
Warning: ReactFitText(...): React component classes must extend React.Component.
Uncaught TypeError: Cannot read property 'firstChild' of undefined

Simple beautiful package, so thanks for that!

Just wondering if there's a way to allow the fit text to work when forcing things to be on a single line? I don't want my text to wrap, and if I give white-space: nowrap the scaling doesnt work, and the text overflows the container. Thanks!

.. It's hard to evaluate without one.

Could be on a github pages, or via rawgit, like https://rawgit.com/jason-wolfe/react-transition-transformers/master/examples/index.html

Thanks!

Hi,

Thanks for that really nice library.

I'm trying to vertically align the resized text using flexbox but is doesn't seems to be resizing at all.
Any idea how I can achieve a vertical alignment within flexboxes?

Regards

what about making inputs fit to width?

i've seen tons of apps that do this, most frequently to enter dollar amounts. If you type a single character the font is huge, and as you type more characters the size decreases.

do you think this plugin is suitable for this, or is it a completely different problem?

In a wide div with a short height the contents overflow the containing div unless a max font is specified.
I'm not sure if this is by design, but I would have thought the container should constrain it.

Hi,

First of all your component is great! Congrats!

One idea: add support to a units like em and rem.

Thks!

On the following picture is it possible to have a part of a text resize with another factor? (having the "ms" text smaller)

Many thanks

Hi,

I was using react-fittext just fine until I updated to React 15.0 today.
Now I am getting the following error message in the console:

Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID

It seems to come from line 45, where the element is defined?
var element = ReactDOM.findDOMNode(this);

If I replace ReactDOM.findDOMNode(this) directly with the dom element I am using, everything will work fine.

Maybe you could look into that?
Thanks!

I get this error when compiling:

SyntaxError: Unexpected token: operator (>) [./~/react-fittext/lib/ReactFitText.js:51,0]

The component does not change props values.
It seems that it takes property value only when the component is mounted, but not updated.

Seeing errors when i load the page in my browser

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
warning.js:36 Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
warning.js:48 Warning: ReactFitText(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.
warning.js:36 Warning: Don't set the props property of the component. Mutate the existing props object instead.
ReactCompositeComponent.js:153 Uncaught TypeError: Can't add property context, object is not extensible

The package.json requires react@~0.13.x.

Is there anything blocking from using a more recent version of react?