Fysk Provider

About Fysk Provider

The Fysk Provider is a crucial component that wraps your application or specific sections of it. It serves as the "Built-in state management" for Fysk components, creating a shared context that manages:

• Global Icons: Defines a standard set of status icons (loading, success, error, etc.) used across all components.

• Animation Control: Centralized animation configuration including durations, easings, and visual effects.

• Configuration: Manages preferences like icon positioning needed by various inputs and displays.

• Consistency: Ensures that every component behaves and looks uniform without repetitive prop passing.

Why is it Necessary?

In a modern, component-driven architecture, passing common assets (like icons or animation settings) to every single leaf component is inefficient and error-prone. The Fysk Provider solves this by injecting these dependencies from the top down.

This "better" approach means:

• Instant Updates: Change an icon or animation timing in the provider, and it updates in every button, input, and alert across your app.

• Clean API: Your component usage remains clean (e.g., just <Button state="loading" />) because the component knows where to find the loading spinner.

• Performance: Optimized for speed, the provider ensures that heavy dependencies like animations are managed centrally.

• Stateful Defaults: It comes pre-configured with Lucide React icons and professional animation timings, so you can start building beautiful UIs immediately.

Basic Setup

Create a client-side Providers component and wrap your root layout with it:

1
"use client"
2

3
import { FyskProvider } from "@fysk/ui"
4

5
// your other client-side providers can go here
6
export function Providers({ children }: { children: React.ReactNode }) {
7
    return (
8
        <FyskProvider>
9
            {children}
10
        </FyskProvider>
11
    )
12
}

Animation Configuration

The animations prop gives you fine-grained control over how all Fysk components animate. All values have sensible defaults based on The Easing Blueprint.

1
<FyskProvider
2
    animations={{
3
        // Use a master switch if you need to globally disable them
4
        enabled: true,
5
        
6
        // Optional: Customize durations (in seconds)
7
        durations: {
8
            instant: 0.1,
9
            fast: 0.15,
10
            normal: 0.2,
11
            slow: 0.3,
12
            layout: 0.4,
13
        },
14
        
15
        // Optional: Customize easings
16
        easings: {
17
            enter: "easeOut",
18
            exit: "easeOut",
19
            layout: "easeInOut",
20
            hover: "easeOut",
21
            linear: "linear",
22
        },
23
        
24
        // Optional: Customize visual effects
25
        effects: {
26
            blur: true,
27
            blurAmount: 4,
28
            scale: true,
29
            scaleAmount: 0.95,
30
            slide: true,
31
            slideDistance: 10,
32
        },
33
    }}
34
>
35
    {children}
36
</FyskProvider>

Duration Presets

Control animation speed across your entire application:

Easing Presets

Control the "feel" of animations. Based on The Easing Blueprint:

Effect Settings

Toggle and customize visual effects that are applied during transitions:

Icon Configuration

Override default icons and set global icon positioning:

1
<FyskProvider
2
    // Override default icons
3
    icons={{
4
        loading: <MyCustomSpinner />,
5
        success: <MyCheckIcon />,
6
        error: <MyErrorIcon />,
7
    }}
8
    
9
    // Set global icon position
10
    iconPosition="start" // or "end"
11
>
12
    {children}
13
</FyskProvider>

See the useFyskAnimation Hook documentation for how components consume this configuration.