8000 GitHub - sdgluck/react-floating-suffix: :cloud: Don't let that suffix outta sight!
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

sdgluck/react-floating-suffix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-floating-suffix

☁️ Don't let that suffix outta sight!

Made with ❤ at @outlandish

npm version js-standard-style

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

react-floating-suffix demo

Install

npm install react-floating-suffix --save

Import

// ES2015
import FloatingSuffix from 'react-floating-suffix'
// CommonJS
var FloatingSuffix = require('react-floating-suffix')

Usage

<FloatingSuffix
  content"New Text Document"
  suffix=".txt"
  
  // all optional
  style={{ backgroundColor: 'white', color: 'black' }}
  width="100px"
  textOverflow="ellipsis"
/>

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.

// Awesome pseudo-code
const 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.

About

☁️ Don't let that suffix outta sight!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0