Home Docs

CascadingValueProvider

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

Usage

Basic
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]
<BitCascadingValueProvider 
    Values="@([
                 ("light", "Theme"),
                 (true, "IsAuthenticated"),
                 ((2) as int?, "NotificationCount"),
                 new(new CascadingDemoUser("Saleh Xafan", "CTO"), "NamedUser"),
                 new(new CascadingDemoUser("Yaser Moradi", "CEO"))
             ])">
    <CascadingValueConsumer />
</BitCascadingValueProvider>
@code {
    public sealed class CascadingValueConsumer : ComponentBase
    {
        [Parameter] public string? Title { get; set; }
    
        [CascadingParameter(Name = "Theme")]
        public string? Theme { get; set; }
    
        [CascadingParameter(Name = "NotificationCount")]
        public int? NotificationCount { get; set; }
    
        [CascadingParameter(Name = "IsAuthenticated")]
        public bool? IsAuthenticated { get; set; }
    
        [CascadingParameter(Name = "NamedUser")]
        public CascadingDemoUser? NamedUser { get; set; }
    
        [CascadingParameter]
        public CascadingDemoUser? TypedUser { get; set; }
    
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            var seq = 0;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "div");
            builder.AddAttribute(seq++, "style", "font-weight:bold;font-size:20px");
            builder.AddContent(seq++, Title ?? "Child component with cascading parameters:");
            builder.CloseElement();
    
            builder.AddMarkupContent(seq++, "<br />");
    
            builder.OpenElement(seq++, "div");
    
            AddValueRow(ref seq, builder, "Theme: ", Theme ?? "null");
    
            AddValueRow(ref seq, builder, "Notifications: ", NotificationCount?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "Authenticated: ", IsAuthenticated?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "User (named parameter): ", FormatUser(NamedUser) ?? "null");
            AddValueRow(ref seq, builder, "User (typed parameter): ", FormatUser(TypedUser) ?? "null");
    
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static void AddValueRow(ref int seq, RenderTreeBuilder builder, string caption, string? value)
        {
            if (value is null) return;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "span");
            builder.AddAttribute(seq++, "style", "font-weight:bold");
            builder.AddContent(seq++, caption);
            builder.CloseElement();
    
            builder.OpenElement(seq++, "span");
            builder.AddContent(seq++, value);
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static string? FormatUser(CascadingDemoUser? user) => user is null ? null : $"{user.Name} [{user.Role}]";
    }
}
Values
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]
<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">
    <CascadingValueConsumer Title="Values" />
</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))
    ];
    
    
    
    public sealed class CascadingValueConsumer : ComponentBase
    {
        [Parameter] public string? Title { get; set; }
    
        [CascadingParameter(Name = "Theme")]
        public string? Theme { get; set; }
    
        [CascadingParameter(Name = "NotificationCount")]
        public int? NotificationCount { get; set; }
    
        [CascadingParameter(Name = "IsAuthenticated")]
        public bool? IsAuthenticated { get; set; }
    
        [CascadingParameter(Name = "NamedUser")]
        public CascadingDemoUser? NamedUser { get; set; }
    
        [CascadingParameter]
        public CascadingDemoUser? TypedUser { get; set; }
    
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            var seq = 0;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "div");
            builder.AddAttribute(seq++, "style", "font-weight:bold;font-size:20px");
            builder.AddContent(seq++, Title ?? "Child component with cascading parameters:");
            builder.CloseElement();
    
            builder.AddMarkupContent(seq++, "<br />");
    
            builder.OpenElement(seq++, "div");
    
            AddValueRow(ref seq, builder, "Theme: ", Theme ?? "null");
    
            AddValueRow(ref seq, builder, "Notifications: ", NotificationCount?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "Authenticated: ", IsAuthenticated?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "User (named parameter): ", FormatUser(NamedUser) ?? "null");
            AddValueRow(ref seq, builder, "User (typed parameter): ", FormatUser(TypedUser) ?? "null");
    
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static void AddValueRow(ref int seq, RenderTreeBuilder builder, string caption, string? value)
        {
            if (value is null) return;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "span");
            builder.AddAttribute(seq++, "style", "font-weight:bold");
            builder.AddContent(seq++, caption);
            builder.CloseElement();
    
            builder.OpenElement(seq++, "span");
            builder.AddContent(seq++, value);
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static string? FormatUser(CascadingDemoUser? user) => user is null ? null : $"{user.Name} [{user.Role}]";
    }
}
ValueList
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
<BitCascadingValueProvider 
    ValueList="@(new()
                {
                    { nullableTheme, "Theme" },
                    { nullableIsAuthenticated, "IsAuthenticated" },
                    { nullableNotificationCount, "NotificationCount" },
                    { nullableNamedUser, "UserInfo" },
                    { nullableTypedUser }
                })">
    <CascadingValueConsumer Title="ValueList" />
</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;
    
    
    
    public sealed class CascadingValueConsumer : ComponentBase
    {
        [Parameter] public string? Title { get; set; }
    
        [CascadingParameter(Name = "Theme")]
        public string? Theme { get; set; }
    
        [CascadingParameter(Name = "NotificationCount")]
        public int? NotificationCount { get; set; }
    
        [CascadingParameter(Name = "IsAuthenticated")]
        public bool? IsAuthenticated { get; set; }
    
        [CascadingParameter(Name = "NamedUser")]
        public CascadingDemoUser? NamedUser { get; set; }
    
        [CascadingParameter]
        public CascadingDemoUser? TypedUser { get; set; }
    
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            var seq = 0;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "div");
            builder.AddAttribute(seq++, "style", "font-weight:bold;font-size:20px");
            builder.AddContent(seq++, Title ?? "Child component with cascading parameters:");
            builder.CloseElement();
    
            builder.AddMarkupContent(seq++, "<br />");
    
            builder.OpenElement(seq++, "div");
    
            AddValueRow(ref seq, builder, "Theme: ", Theme ?? "null");
    
            AddValueRow(ref seq, builder, "Notifications: ", NotificationCount?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "Authenticated: ", IsAuthenticated?.ToString() ?? "null");
    
            AddValueRow(ref seq, builder, "User (named parameter): ", FormatUser(NamedUser) ?? "null");
            AddValueRow(ref seq, builder, "User (typed parameter): ", FormatUser(TypedUser) ?? "null");
    
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static void AddValueRow(ref int seq, RenderTreeBuilder builder, string caption, string? value)
        {
            if (value is null) return;
    
            builder.OpenElement(seq++, "div");
    
            builder.OpenElement(seq++, "span");
            builder.AddAttribute(seq++, "style", "font-weight:bold");
            builder.AddContent(seq++, caption);
            builder.CloseElement();
    
            builder.OpenElement(seq++, "span");
            builder.AddContent(seq++, value);
            builder.CloseElement();
    
            builder.CloseElement();
        }
    
        private static string? FormatUser(CascadingDemoUser? user) => user is null ? null : $"{user.Name} [{user.Role}]";
    }
}

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.
  • On this page