react-responsivebr

react-responsivebr

ResponsiveBr is a <br> tag which is adapts to the viewport width. It renders a line break if you want to and a white space otherwise. You can specify a min width, a maximum width or both.

By default each uses its own eventListeners to record viewport changes. Alternatively one can also pass windowWidth as a prop.

1.8kb gzipped.

Basic usage

Import using:

import ResponsiveBr from 'react-ResponsiveBr';

Then use it like this:

The following linebreak<ResponsiveBr maxWidth="800" />renders only if the browser is less than 800px wide.

The following linebreak<ResponsiveBr minWidth="500" />renders only if the browser is more than 500px wide.

The following linebreak<ResponsiveBr minWidth="400" maxWidth="600" />renders only if the browser is between 400px and 600px wide.

Installing

npm i react-ResponsiveBr

or

yarn add react-ResponsiveBr

License

MIT-licensed.