1.0.12 • Published 4 years ago

react-adaptive-text v1.0.12

Weekly downloads
33
License
MIT
Repository
-
Last release
4 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

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago