Tutorial React Extra: Tamaño de fuente dinámico

27 de junio 2015

Mostrando notas con fuentes de diferentes tamaños dependiendo del contenido

Un detalle bastante elegante es que las notas muestren un texto más grande cuando hay pocas palabras, y que su tamaño se vaya reduciendo a medida que el texto es más largo.

googlekeeppreview

Causa un impacto visual agradable y es muy fácil de implementar en React, con sólo editar el componente Note.

Note.js

Ya que el contenido de cada las notas es enviado al componente Note vía props, podemos manipularlo de la forma que queramos antes de mostrar el resultado. En este caso, crearemos una variable cuyo contenido dependa de la longitud del texto de la nota (contenido en this.props.text) y usaremos CSS para modificar el tamaño del texto de forma acorde.

En el método render(), antes de retornar la estructura del componente, declaramos la variable type con un valor de texto predeterminado, de esta forma:

        var type = 'text-shortest';

Y luego cambiamos este valor (si es necesario), sólo si el componente es de determinada longitud. Al final tendremos cinco posibilidades:

        if (this.props.text.length > 240) type = 'text-longest';
        else if (this.props.text.length > 120) type = 'text-long';
        else if (this.props.text.length > 60) type = 'text-medium';
        else if (this.props.text.length > 30) type = 'text-short';

Ahora podemos utilizar esta variable como clase HTML en la estructura final, de esta forma:

        return (
            <div className="note">
                <div className="note-text">
                    <strong>{this.props.title}</strong>
                    <p |||className={type}|||>{this.props.text}</p>
                </div>
                <div className="note-toolbar">
                    <a className="note-btn-delete" />
                </div>
            </div>
        );

El método completo se debería ver así:

    render: function() {
        var type = 'text-shortest';

        if (this.props.text.length > 240) type = 'text-longest';
        else if (this.props.text.length > 120) type = 'text-long';
        else if (this.props.text.length > 60) type = 'text-medium';
        else if (this.props.text.length > 30) type = 'text-short';

        return (
            <div className="note">
                <div className="note-text">
                    <strong>{this.props.title}</strong>
                    <p className={type}>{this.props.text}</p>
                </div>
                <div className="note-toolbar">
                    <a className="note-btn-delete" />
                </div>
            </div>
        );
    }

Ahora podemos ajustar la apariencia de cada clase con CSS, por ejemplo así:

p.text-shortest { font-size: 48px; font-weight: 100; }
p.text-short { font-size: 36px; font-weight: 100; }
p.text-medium { font-size: 24px; font-weight: 300; }
p.text-long { font-size: 18px; }
p.text-longest { font-size: 14px; }

Listo! Ahora el texto de cada nota ajustará su tamaño dependiendo de su longitud.