https://github.com/giulioz/fluid-resize-react

Scale props to fill a container using binary search
https://github.com/giulioz/fluid-resize-react

Last synced: about 1 month ago
JSON representation

Scale props to fill a container using binary search

• Host: GitHub
• URL: https://github.com/giulioz/fluid-resize-react
• Owner: giulioz
• Created: 2018-07-27T22:05:43.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-26T17:38:00.000Z (over 4 years ago)
• Last Synced: 2024-10-02T08:37:03.523Z (about 2 months ago)
• Language: JavaScript
• Size: 627 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# fluid-resize-react

> Provide a simple way to scale props to fill a container using binary search. Useful for scaling text sizes to fit a container.

[![NPM](https://img.shields.io/npm/v/fluid-resize-react.svg)](https://www.npmjs.com/package/fluid-resize-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![](demo.png)

### Components

- **FixedWidth**: Scale down to fit container width

- **FixedHeight**: Scale down to fit container height

- **FixedSize**: Scale down to fit container width and height

## Install

```bash

npm install --save fluid-resize-react

```

## Usage

```jsx

function App() {

  const renderer = current => (

    

      Lorem ipsum dolor sit amet sed adipiscitur sit adipiscitur a very big

      heading that im writing

    

  );

  const style = {

    overflow: "hidden",

    outline: "1px solid red",

    whiteSpace: "nowrap"

  };

  return (

    


      

        {renderer}

      

      {renderer}

      {renderer}

      {renderer}

      {renderer}

    

  );

}

```


Pass a render function to a component as child. The component will call the render function passing the current iteration size as parameter.

You can also provide max value, min value and max iterations as props:

```jsx

function App() {

  const renderer = current => (

    Test

  );

  const style = {

    overflow: "hidden",

    whiteSpace: "nowrap"

  };

  return (

    


      

        {renderer}

      

    

  );

}

```


This components can be used for text as well for any other usages:

```jsx

function App() {

  const renderer = current => (

    


      {new Array(Math.floor(current)).fill(0).map(_ => (

        


      ))}

    

  );


  return (

    


      

        {renderer}

      

    

  );

}

```


## License

MIT © [giulioz](https://github.com/giulioz)