☁️ Don't let that suffix outta sight!
Made with ❤ at @outlandish
Float an extension/suffix/whatevs so that it displays to the right of the content even if the content overflows.
Dude no. 1: "Hey man, you should totally float the suffix so that it never goes out of sight."
Dude no. 2: "Outta sight, dude!"
npm install react-floating-suffix --save// ES2015
import FloatingSuffix from 'react-floating-suffix'// CommonJS
var FloatingSuffix = require('react-floating-suffix')<FloatingSuffix
content"New Text Document"
suffix=".txt"
// all optional
style={{ backgroundColor: 'white', color: 'black' }}
width="100px"
textOverflow="ellipsis"
/>Required.
The content to append a floating suffix on to.
Required.
The floating suffix text.
Optional, default: none.
Customise the container with your own CSS styles.
Overrides the textOverflow and width properties.
Optional, default: '100%'
The width of the container.
When the content is larger than this value minus the width of the suffix, the suffix will stick.
// Awesome pseudo-code
const willSuffixFloat = container.width - suffix.width > width Optional, default: ellipsis.
Value of the text-overflow CSS property for the content.
All pull requests and issues welcome!
If you're not sure how, check out Kent C. Dodds' great video tutorials on egghead.io!
react-floating-suffix was created by Sam Gluck and is released under the MIT license.