1.0.12 • Published 5 years ago

react-adaptive-text v1.0.12

Weekly downloads
33
License
MIT
Repository
-
Last release
5 years ago

AdaptiveText React component

Simple UI component that allows the font size of a text to adapt automatically to fill the width of an element in one line.

AdaptiveText render example

Prerequisites

  • react >= 16.8.0

Install

npm install --save react-adaptive-text

Usage example

import React from 'react';
import AdaptiveText from 'react-adaptive-text';

function BasicExample = () => {
  const wrapperStyle = {
    display: 'flex',
    justifyContent: 'center',
    width: 500,
  };

  return (
    <div style={wrapperStyle}>
      <AdaptiveText
        width="80%"
        text="This text fills 80% width of its container!"
      />
    </div>
  );
};

Options

PropertyTypeDescription
color (Optional)CSS valueOverrides color inheritance
fontFamily (Optional)CSS valueOverrides font-family inheritance
fontSizeMax (Optional)integerMaximum font size (in pixels)
fontSizeMin (Optional)integerMinimum font size (in pixels)
fontStyle (Optional)CSS valueOverrides font-style inheritance
fontWeight (Optional)CSS valueOverrides font-weight inheritance
textstringText to display
textDecoration (Optional)CSS valueOverrides text-decoration inheritance
width (Optional)CSS valueOverrides width inheritance (default: 100%)
1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago