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.
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.
npm i react-ResponsiveBr
or
yarn add react-ResponsiveBr
MIT-licensed.