fractils

utilities for sveltekit

npm i -D fractils

components

OnMount

component

Mounts an element on Svelte's onMount lifecycle hook .

</>

MacScrollbar

component

Replaces the default scrollbar with a MacOS-style scrolbar.
string
root
The root element used to scroll. Defaults to #svelte, but it can be replaced with an id, classname, or HTMLElement

src/routes/__layout.svelte

You can see it when you scroll on this page ->
</>

utils

device

stores

A series of device related stores.
store
mobile
Detects if screenW < mobileThreshold
store
mobileThreshold
Writable store to adjust the $mobile 'breakpoint' threshold. Default 900.
store
screenW
Tracks the screen width.
store
screenH
Tracks the screen height.
store
scrollY
Tracks the users scroll position.
store
mouse
Tracks the users mouse position.


First, the stores need to be registered. Ideally in the root layout:

src/routes/__layout.svelte


They can then be consumed normally:

Example.svelte

mobile
false
screenW
900
screenH
900
scrollY
0
mouse
0, 0
</>

localStorageStore

store

A Svelte store that persists to localStorage.
param
key
The key to store the data under.
param
value
The initial value of the store.
returns
A writable store.

+
-
refresh the page and count will persist </>

log

function

A simple logger that only runs in dev environments.
param
msg
A string or object to log.
param
color
Any CSS color value ( named | hex | rgb | hsl ).
param
bgColor
Same as color ⇧.
param
fontSize
Any number.
param
css
Optional additional CSS.

04:20:69.173
Hello world
log.ts:22
</>

wait

function

A simple wait timer.
param
t
Time to wait in ms.
returns
A promise that resolves after t ms.

ready

set

go

</>

mapRange

function

Maps a value from one range to another.
param
value
The value to map.
param
x1
Lower bound of the input range.
param
x2
Upper bound of the input range.
param
y1
Lower bound of the output range.
param
y2
Upper bound of the output range.
returns
A number mapped from the input range to the output range

50
0.00
</>

theme

theme

store + functions

A series of utilitites for managing the active theme.
store
theme
A writable, persistant store to manage the active theme.
function
initTheme
Initializes theme from system preference or theme store and registers a prefers-media listener for changes.
note: <ThemeToggle /> component does this for you.

dark

function
toggleTheme
Toggles $theme to and from light and dark mode.
function
applyTheme
Manually apply a specific theme.
param
newTheme
The theme to apply.


</>

ThemeToggle

component

A simple component to toggle between light and dark theme.
prop
init
Make false to prevent initTheme() from being called when the component mounts. Defaults to true.

</>

actions

clickOutside

action

Emits an event when the user clicks outside the element. Great for modals.
param
whitelist
Array of classnames. If the click target element has one of these classes, it will not be considered an outclick.
event
outclick
Fired when the user clicks outside of the element.
detail
target
The element that was clicked. Access with e.detail.target.

clickedOutside = false
🚫
</>

visibility

action

Observes an element's current viewport visibility and dispatches relevant events.
param
options
Optional config:
option
view
The root view. Defaults to `window`.
option
margin
Margin around root view - 'px' or '%'. Default '0px'.
option
threshold
% of pixels required in view to trigger event. An array will trigger multiple events - '0-1'. Default 0.
option
once
Whether to dispatch events only once. Default false.
event
f-change
Triggered when the element enters or leaves view.
event
f-enter
Triggered when the element enters view.
event
f-leave
Triggered when the element leaves view.
event
detail
boolean
isVisible
True if the element is currently in the viewport.
element
entry
The element being observed.
Direction
scrollDirection
{
        horizontal:   'up' | 'down' | 'left' | 'right',
        vertical:   'up' | 'down' | 'left' | 'right'
}

</>