CascadingValueProvider

BitCascadingValueProvider makes it easy to push multiple cascading values to child components without nesting several CascadingValue components manually.

Usage


Basic

<BitCascadingValueProvider 
    Values="@([
                 ("light", "Theme"),
                 (true, "IsAuthenticated"),
                 ((2) as int?, "NotificationCount"),
                 new(new CascadingDemoUser("Saleh Xafan", "CTO"), "NamedUser"),
                 new(new CascadingDemoUser("Yaser Moradi", "CEO"))
             ])">
    <!-- Place components with cascading parameters here.
        The demo CascadingValueDemoConsumer's source code is located at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingValueDemoConsumer.razor
        CascadingDemoUser's source code can be found at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingDemoUser.cs -->
    <CascadingValueDemoConsumer />
</BitCascadingValueProvider>
Checkout the basic usage of the BitCascadingValueProvider in action here.


Child component with cascading parameters:

Theme: light
Notifications: 2
Authenticated: True
User (named parameter): Saleh Xafan [CTO]
User (typed parameter): Yaser Moradi [CEO]

Values

<BitButton OnClick="() => currentTheme = nextTheme">Switch to @nextTheme theme</BitButton>
<BitButton OnClick="() => notificationCount++">Add notification (@notificationCount)</BitButton>
<BitToggle @bind-Value="isAuthenticated" Text="Authenticated user" />
<BitTextField @bind-Value="userName" Label="UserName:" Immediate DebounceTime="300" />
<BitTextField @bind-Value="userRole" Label="UserRole:" Immediate DebounceTime="300" />


<BitCascadingValueProvider Values="values">
    <!-- Place components with cascading parameters here.
        The demo CascadingValueDemoConsumer's source code is located at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingValueDemoConsumer.razor
        CascadingDemoUser's source code can be found at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingDemoUser.cs -->
    <CascadingValueDemoConsumer />
</BitCascadingValueProvider>
@code {
    private bool isAuthenticated = true;
    private string currentTheme = "Light";
    private int notificationCount = 2;
    private string userName = "Ava Smith";
    private string userRole = "Product manager";
    
    private string nextTheme => currentTheme == "Light" ? "Dark" : "Light";
    
    private IEnumerable<BitCascadingValue> values =>
    [
        (currentTheme, "Theme"),
        (isAuthenticated, "IsAuthenticated"),
        (notificationCount, "NotificationCount"),
        new (new CascadingDemoUser("Saleh Xafan", "CTO"), "NamedUser"),
        new (new CascadingDemoUser(userName, userRole))
    ];
}
Play with provided cascading values and see the effect:







Changing cascading values:

Theme: Light
Notifications: 2
Authenticated: True
User (named parameter): Saleh Xafan [CTO]
User (typed parameter): Ava Smith [Product manager]

ValueList

<BitCascadingValueProvider 
    ValueList="@(new()
                {
                    { nullableTheme, "Theme" },
                    { nullableIsAuthenticated, "IsAuthenticated" },
                    { nullableNotificationCount, "NotificationCount" },
                    { nullableNamedUser, "UserInfo" },
                    { nullableTypedUser }
                })">
    <!-- Place components with cascading parameters here.
        The demo CascadingValueDemoConsumer's source code is located at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingValueDemoConsumer.razor
        CascadingDemoUser's source code can be found at https://github.com/bitfoundation/bitplatform/tree/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/CascadingValueProvider/CascadingDemoUser.cs -->
    <CascadingValueDemoConsumer />
</BitCascadingValueProvider>
@code {
    private readonly string? nullableTheme = null;
    private readonly bool? nullableIsAuthenticated = null;
    private readonly int? nullableNotificationCount = null;
    private readonly CascadingDemoUser? nullableNamedUser = null;
    private readonly CascadingDemoUser? nullableTypedUser = null;
}
Use ValueList parameter when you're not sure of nullability of values.


ValueList cascading values:

Theme: null
Notifications: null
Authenticated: null
User (named parameter): null
User (typed parameter): null

API

BitCascadingValueProvider parameters

Name Type Default value Description
ChildContent RenderFragment? null The content to which the values should be provided.
Values IEnumerable<BitCascadingValue>? null The cascading values to be provided for the children.
ValueList BitCascadingValueList? null The cascading value list to be provided for the children.

BitCascadingValue properties

Defines a value that can be cascaded to descendant components.

Name Type Default value Description
Value object? null The value to be provided.
Name string? null The optional name of the cascading value.
IsFixed bool false If true, indicates that Value will not change.
ValueType Type Value?.GetType() The type to use as the TValue of the CascadingValue component.

BitCascadingValueList properties

A helper class to ease the using of a list of the BitCascadingValue.

Name Type Default value Description
Add<T>(T value, string? name = null, bool isFixed = false) void Adds a typed BitCascadingValue to the list.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.