react-occamy-text
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

Occamy Text

Occamy is choranaptyxic, meaning it will grow or shrink to fit available space

-- Fantastic Beasts and Where to Find Them

React component for automatically sized text that fits in its parent.

NPM JavaScript Style Guide

Alt text

Demo & Examples

Live demo: splact.github.io/react-occamy-text

To build the examples locally, run:

cd example
npm install
npm start

Installation

npm install --save react-occamy-text

Usage

import * as React from 'react';
 
import OccamyText from 'react-occamy-text';
 
class Example extends React.Component {
  render () {
    return <OccamyText>Abra cadabra flipendo, alabif shazam!</OccamyText>;
  }
}

It should not be used inside auto-sized (eg. height: auto) elements.

Properties

  • children – the text that need to be resized
  • grow – true if the text can scale up its original size (default true)
  • shrink – true if the text can scale down its original size (default true)
  • maxFontSize – maximum font size in pixels (default 96)
  • minFontSize – minimum font size in pixels (default 4)
  • maxFontSizeVariation – maximum font size variation per iteration (default 8)
  • minFontSizeVariation – minimum font size variation per iteration (default 0.3)
  • maxHeight – maximum height (default undefined, parent height will be used instead)

Notes

OccamyText is rendered as a div with occamy-text class and height: 100% style defined inline to make it fits in its parent.

Tollerance

The output text will not always perfectly fit the parent height, in some cases a subtile tollerance is accepted, giving always the larger text that doesn't exceed its parent.

Development

To get started, in one tab, run: npm run start And in another tab, run the create-react-app devserver: cd example && npm run start

License

MIT © Splact

Readme

Keywords

none

Package Sidebar

Install

npm i react-occamy-text

Weekly Downloads

2

Version

1.1.3

License

MIT

Unpacked Size

77.9 kB

Total Files

8

Last publish

Collaborators

  • splact