score:0

Accepted answer

(this is not an answer, it's just a cleaned-up method, because it was driving me nuts.)

scaledname() {
  const { name } = this.state;

  if (!name) {
    return null;
  }

  if (name.length <= 11) {
    return (
      <div classname="name-preview">{name}</div>
    );
  }

  const fontscale = 214 - name.length;
  return (
    <div classname="name-preview" style={{ fontsize: `${fontscale}%` }}>
      {name}
    </div>    
  );
}

i'd actually probably move this into a slightly-smarter-but-light component. this is completely untested, but gives a rough idea:

import { isempty } from 'lodash'; // or whatever.

const scaledname = ({ value, startingscale=203, scaleatlength=11, scalefactor=1 }) => {
  if (isempty(value)) {
    return null;
  }

  const styles = {};

  if (value.length > scaleatlength) {
    const scaledelta = (value.length - scaleatlength) * scalefactor;
    const fontscale = startingscale - scaledelta;

    styles.fontsize = `${fontscale}%`;
  }

  return (
    <div classname="name-preview" style={styles}>
      {value}
    </div>
  );
};

Related Query

More Query from same tag