Skip to content

Fit that text of yours in its container automatically

License

Notifications You must be signed in to change notification settings

leveluptuts/svelte-fit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Svelte Fit 🏃‍♂️🏃‍♀️🏋️

Bundle Size Badge

An extremely simple, no dependency fit text library.

Svelte Kit used and tested

Demo https://svelte.dev/repl/f249268c09674e1da2400051e7f391ca?version=3.50.0

npm install @leveluptuts/svelte-fit


<script>
	import { fit, parent_style } from '@leveluptuts/svelte-fit'
</script>

<!-- Must be in a container -->
<div class="container">

	<!-- Parent Wrapping Div -->
	<div style={parent_style}>
		<h1 use:fit>Hello World</h1>
	</div>

</div>

<style>
.container {
		height: 300px;
		width: 300px
	}
</style>

API

use:fit

use:fit={{min_size: 12, max_size:100 }}

Options Default
min_size 12
max_size 100

Contribution

Possible Improvements

I'd like to keep this package as tiny as possible, but that doesn't mean I don't want to make it better. Here are some ideas.

  • Choose width / both for choosing when to stop growing. width would prevent all whitespace breaks.
  • Throttling
  • Maybe dynamically add "parent div" from action itself

Sponsors

Level Up Tutorials

https://www.leveluptutorials.com

Cutting-edge, focused & high quality video tutorials for web developers and designers Syntax

Learn Svelte!

A Tasty Treats Podcast for Web Developers. Ft Wes Bos & Scott Tolinski

Thank you!

About

Fit that text of yours in its container automatically

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published