react-floating-suffix

:cloud: 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!"

Install

1npm install react-floating-suffix --save

Import

1// ES2015
2import FloatingSuffix from 'react-floating-suffix'

1// CommonJS
2var FloatingSuffix = require('react-floating-suffix')

Usage

1<FloatingSuffix
2  content="New Text Document"
3  suffix=".txt"
4  
5  // all optional
6  style={{ backgroundColor: 'white', color: 'black' }}
7  width='100px'
8  textOverflow="ellipsis"
9/>

Props

content <String|Element>

Required.

The content to append a floating suffix on to.

suffix <String>

Required.

The floating suffix text.

style <Object>

Optional, default: none.

Customise the container with your own CSS styles.

Overrides the textOverflow and width properties.

width <String|Number>

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.

1// Awesome pseudo-code
2const willSuffixFloat = container.width - suffix.width > width 

textOverflow <String>

Optional, default: ellipsis.

Value of the text-overflow CSS property for the content.

Contributing

All pull requests and issues welcome!

If you're not sure how, check out Kent C. Dodds' great video tutorials on egghead.io!

Author & License

react-floating-suffix was created by Sam Gluck and is released under the MIT license.