GetForecastAsync(int offset)
68 | {
69 | await Task.Delay(500);
70 |
71 | if (Random.Shared.Next(1, 9) % 3 == 0)
72 | {
73 | throw new Exception("Failed");
74 | }
75 |
76 | var startDate = DateTime.Now.AddDays(offset);
77 |
78 | return Enumerable.Range(1, 5).Select(index => new WeatherForecast
79 | {
80 | Date = startDate.AddDays(index),
81 | TemperatureC = Random.Shared.Next(-20, 55),
82 | Summary = Summaries[Random.Shared.Next(Summaries.Length)]
83 | }).ToArray();
84 | }
85 | }
86 | }
--------------------------------------------------------------------------------
/Demo/Pages/Hooks/Hooks.razor:
--------------------------------------------------------------------------------
1 | @page "/hooks"
2 | Blazor Hooked - Hooks
3 |
4 | Hooks
5 |
6 | BlazorHooked provides equivilants for the basic hooks that React provides. UseContext is mostly already provided by
7 | CascadingParameters.
8 |
9 | UseState
10 |
11 | UseState takes an initial value for the state and returns a tuple, the first item being the current
12 | state, and the second being a function to update the state AKA the set function. You should treat the
13 | state as immutable and only update it via the set function.
14 |
15 |
16 | You would typically only really use UseState for small value types. The most simple usecase would be a
17 | counter:
18 |
19 |
20 |
21 | UseReducer
22 |
23 | This is yet another Flux like thing, but Hooks make it so much simpler. It acts much like UseState but
24 | can handle more granular updates to the state via Actions. Like UseState it takes an initial state but
25 | also a Reducer. Again like UseState it returns the current state, but the set function is
26 | replaced by a Dispatcher.
27 |
28 | Lets define some of those words:
29 |
30 | -
31 | Action: A command or event to inform the reducer that the state should be changed. These are
32 | usually best served by
records.
33 |
34 | -
35 | Reducer: A function that takes the current state and an action and returns the new state. The
36 | framework doesn’t care how you do the reduction; it could be a local function, a static method on a seperate
37 | class or a type that you inject. It’s best practice, however, to not trigger things like http requests from the
38 | reducer, that’s what Effects are for.
39 |
40 | -
41 | Dispatcher: A function provided by the framework that you call with an Action to invoke the
42 | Reducer.
43 |
44 |
45 | Lets refactor our counter:
46 |
47 |
48 | It’s a slightly trivial example but it shows the concepts. Checkout the Loader helper
49 | when you want to do async requests with a loading indicator.
50 |
51 |
52 | UseEffect
53 |
54 | Effects are used to start background tasks and clean up after them when they’re finished with. The classic example
55 | would be to start listening on a websocket when the component is first rendered, then gracefully shutdown the
56 | connection when the component is unmounted and disposed. If your Effect uses a variable like a value from
57 | UseState or a component paramenter and you’d like the Effect to re-run when that changes, you add that
58 | variable as a Dependency by letting UseEffect track it’s value when you define the Effect.
59 |
60 | The example below, starts a counter on first render which can then be stopped and reset.
61 |
62 |
63 | Subscribe
64 |
65 | Subscribe decorates the dispatcher with a function to call if a particular action is dispatched so that you
66 | can run a task. These are sometimes refered to as a Saga. A saga can be used to orchestrate something in the background
67 | and dispatch further actions.
68 |
69 |
--------------------------------------------------------------------------------
/Demo/Pages/Hooks/UseEffect.snip.razor:
--------------------------------------------------------------------------------
1 | @using BlazorHooked
2 | @using System.Threading
3 | @using System.Threading.Tasks
4 |
5 |
6 | @{
7 | var (state, dispatch) = context.UseReducer(Reducer, new State(new CancellationTokenSource(), 0, true, 0));
8 |
9 | context.UseEffect(GenerateMessages(dispatch, state!), new object[] { state!.StartCount });
10 |
11 |
12 |
15 | Count: @state.Count
16 |
17 | }
18 |
19 |
20 | @code {
21 | public record State(CancellationTokenSource Cancel, int Count, bool IsRunning, int StartCount);
22 |
23 | public record Start();
24 | public record Stop();
25 | public record NewMessage(int Count);
26 |
27 | State Reducer(State state, object action)
28 | {
29 | if (action is Stop)
30 | {
31 | state.Cancel.Cancel();
32 | }
33 |
34 | return action switch
35 | {
36 | Start => state with { Count = 0, Cancel = new CancellationTokenSource(), StartCount = state.StartCount + 1, IsRunning = true },
37 | NewMessage m => state with { Count = m.Count },
38 | Stop => state with { IsRunning = false },
39 | _ => state,
40 | };
41 | }
42 |
43 | CallbackEffect GenerateMessages(Dispatch dispatcher, State state) => () =>
44 | {
45 | Task.Run(async () =>
46 | {
47 | var count = 0;
48 |
49 | while (!state.Cancel.IsCancellationRequested)
50 | {
51 | dispatcher(new NewMessage(++count));
52 | try
53 | {
54 | await Task.Delay(1000, state.Cancel.Token);
55 | }
56 | catch (TaskCanceledException) { }
57 | }
58 | });
59 |
60 | // Return a way to cancel the looping if the component is disposed
61 | return () => state.Cancel.Cancel();
62 | };
63 | }
--------------------------------------------------------------------------------
/Demo/Pages/Hooks/UseReducer.snip.razor:
--------------------------------------------------------------------------------
1 | @using BlazorHooked
2 | @code {
3 | public record CounterState(int Count);
4 |
5 | public record Increment();
6 | public record Decrement();
7 |
8 | private CounterState Reducer(CounterState state, object action) => action switch
9 | {
10 | Increment => state with { Count = state.Count + 1 },
11 | Decrement => state with { Count = state.Count - 1 },
12 | _ => state,
13 | };
14 | }
15 |
16 |
17 | @{
18 | var (state, dispatch) = context.UseReducer(Reducer, new CounterState(0));
19 | }
20 |
21 | Count: @state!.Count
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Demo/Pages/Hooks/UseState.snip.razor:
--------------------------------------------------------------------------------
1 | @using BlazorHooked
2 |
3 |
4 | @{
5 | var (count, setCount) = context.UseState(0);
6 | }
7 |
8 | Count: @count
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Demo/Pages/Hooks/WithSaga.snip.razor:
--------------------------------------------------------------------------------
1 | @using BlazorHooked
2 | @code {
3 | public record CounterState(int Count, string? Message);
4 |
5 | public record Increment();
6 | public record Decrement();
7 | public record SetMessage(string Message);
8 |
9 | private CounterState Reducer(CounterState state, object action) => action switch
10 | {
11 | Increment => state with { Count = state.Count + 1 },
12 | Decrement => state with { Count = state.Count - 1 },
13 | SetMessage m => state with { Message = m.Message },
14 | _ => state,
15 | };
16 | }
17 |
18 |
19 | @{
20 | var (state, dispatch) = context.UseReducer(Reducer, new CounterState(0, null))
21 | .Subscribe((action, dispatch) => Task.Run(() => dispatch(new SetMessage("You incemented last time"))))
22 | .Subscribe((action, dispatch) => Task.Run(() => dispatch(new SetMessage("You decremented last time"))));
23 | }
24 |
25 | Count: @state!.Count
26 |
27 |
28 |
29 |
30 | Message: @state.Message
31 |
--------------------------------------------------------------------------------
/Demo/Pages/Index/BaseComponent.snip.razor:
--------------------------------------------------------------------------------
1 | @inherits HookComponentBase
2 |
3 | @{
4 | this.Hook.UseState(0);
5 | }
--------------------------------------------------------------------------------
/Demo/Pages/Index/GlobalStore.snip.razor:
--------------------------------------------------------------------------------
1 | @code {
2 | public record AppState();
3 |
4 | private Reducer RootReducer(Reducer reducer) => reducer;
5 | }
6 |
7 | new AppState())>
8 |
9 |
10 |
11 |
12 |
13 |
14 | Not found
15 |
16 | Sorry, there's nothing at this address.
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Demo/Pages/Index/HookComponent.snip.razor:
--------------------------------------------------------------------------------
1 |
2 | @{
3 | context.UseState(0);
4 | }
5 | Hello
6 |
--------------------------------------------------------------------------------
/Demo/Pages/Index/Index.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 |
3 | Blazor Hooked
4 |
5 |
6 | Blazor Hooked
7 | 
8 |
9 |
10 |
11 |
12 | A minimal boiler-plate, state management framework for Blazor that resembles React Hooks.
13 |
14 |
15 |
17 |
Get Started
18 |
19 |
20 | Install from Nuget
21 | 
22 |
23 | Add the obligitory @@using BlazorHooked statement to _Imports.razor.
24 | If you're intending on using a global store wrap your app in your App.razor.
25 | The HookContext
27 |
28 | Hooks are accessed via a HookContext which you can get one of two ways.
29 |
30 |
31 |
32 | Inherit from HookComponentBase in which case this.Hook
33 | exposes a single HookContext for the child component.
34 |
35 |
37 | Or use the Hook component, in which case the HookContext is scoped
38 | within the Hook. This gives more flexibility for you to inherit from other
39 | base components and even to create multiple contexts within a component.
40 |
41 | You can rename the context to something more helpful and/or to avoid collisions.
43 |
45 | You’ll find there are very few classes or interfaces to inherit or implement
46 | in BlazorHooked. Actions and state in the examples are usually defined as records.
47 | The more you embrace immutibility the easier the Model View Update pattern becomes
48 | because you stop fighting the render loop and BlazorHooked is designed to foster
49 | that by using functional constructs wherever possible.
50 |
51 | Click below to learn about the Hooks we currently provide.
52 |
53 | Hooks
54 |
55 |
--------------------------------------------------------------------------------
/Demo/Pages/Index/MultipleHooks.snip.razor:
--------------------------------------------------------------------------------
1 |
2 | @{
3 | var (state, _) = Hook.UseState(0);
4 | }
5 |
6 | @state
7 |
8 |
9 | @{
10 | var (state, _) = Hook2.UseState(1);
11 | }
12 |
13 | @state
14 |
--------------------------------------------------------------------------------
/Demo/Program.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Components.Web;
2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
3 | using Demo;
4 | using Havit.Blazor.Components.Web;
5 |
6 | var builder = WebAssemblyHostBuilder.CreateDefault(args);
7 | builder.RootComponents.Add("#app");
8 | builder.RootComponents.Add("head::after");
9 | builder.Services.AddHxServices();
10 |
11 | await builder.Build().RunAsync();
12 |
--------------------------------------------------------------------------------
/Demo/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "profiles": {
3 | "Demo": {
4 | "commandName": "Project",
5 | "dotnetRunMessages": true,
6 | "launchBrowser": false,
7 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
8 | "applicationUrl": "https://localhost:7147;http://localhost:5163",
9 | "environmentVariables": {
10 | "ASPNETCORE_ENVIRONMENT": "Development"
11 | }
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/Demo/Shared/Code.razor:
--------------------------------------------------------------------------------
1 | @inject IJSRuntime Javascript
2 |
3 | @code {
4 | [Parameter]
5 | public string Language { get; init; } = "razor";
6 |
7 | [Parameter, EditorRequired]
8 | public Type Snippet { get; init; } = null!;
9 |
10 | private string? Content { get; set; }
11 |
12 | protected override async Task OnParametersSetAsync()
13 | {
14 | base.OnParametersSet();
15 |
16 | var resourceName = Snippet.FullName!.Replace("_snip", ".snip.razor");
17 | using var stream = Snippet.Assembly.GetManifestResourceStream(resourceName);
18 | using var content = new StreamReader(stream!);
19 |
20 | Content = await content.ReadToEndAsync();
21 | }
22 |
23 | protected override async Task OnAfterRenderAsync(bool firstRender)
24 | {
25 | await base.OnAfterRenderAsync(firstRender);
26 | await Javascript.InvokeVoidAsync("highlightCode");
27 | }
28 | }
29 |
30 |
31 |
32 | @Content
33 |
34 |
--------------------------------------------------------------------------------
/Demo/Shared/CodeDemo.razor:
--------------------------------------------------------------------------------
1 | @inject IJSRuntime Javascript
2 |
3 | @code {
4 | [Parameter]
5 | public string Language { get; init; } = "razor";
6 |
7 | [Parameter, EditorRequired]
8 | public Type Snippet { get; init; } = null!;
9 | }
10 |
11 |
12 |
13 |
14 | 
6 | Blazor Hooked
7 |
8 |
9 |
10 |
11 | Home
12 | Hooks
13 | Store
14 | Helpers
15 | GitHub
16 |
17 |
18 |
19 |
20 |
21 |
22 | @Body
23 |
24 |
25 |
26 |
27 |
28 | © 2022 James Dibble
29 |
30 |
--------------------------------------------------------------------------------
/Demo/Shared/MainLayout.razor.css:
--------------------------------------------------------------------------------
1 | .page {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | main {
8 | flex: 1;
9 | }
10 |
11 | .sidebar {
12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13 | }
14 |
15 | .top-row {
16 | background-color: #f7f7f7;
17 | border-bottom: 1px solid #d6d5d5;
18 | justify-content: flex-end;
19 | height: 3.5rem;
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .top-row ::deep a, .top-row ::deep .btn-link {
25 | white-space: nowrap;
26 | margin-left: 1.5rem;
27 | text-decoration: none;
28 | }
29 |
30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31 | text-decoration: underline;
32 | }
33 |
34 | .top-row ::deep a:first-child {
35 | overflow: hidden;
36 | text-overflow: ellipsis;
37 | }
38 |
39 | @media (max-width: 640.98px) {
40 | .top-row:not(.auth) {
41 | display: none;
42 | }
43 |
44 | .top-row.auth {
45 | justify-content: space-between;
46 | }
47 |
48 | .top-row ::deep a, .top-row ::deep .btn-link {
49 | margin-left: 0;
50 | }
51 | }
52 |
53 | @media (min-width: 641px) {
54 | .page {
55 | flex-direction: row;
56 | }
57 |
58 | .sidebar {
59 | width: 250px;
60 | height: 100vh;
61 | position: sticky;
62 | top: 0;
63 | }
64 |
65 | .top-row {
66 | position: sticky;
67 | top: 0;
68 | z-index: 1;
69 | }
70 |
71 | .top-row.auth ::deep a:first-child {
72 | flex: 1;
73 | text-align: right;
74 | width: 0;
75 | }
76 |
77 | .top-row, article {
78 | padding-left: 2rem !important;
79 | padding-right: 1.5rem !important;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/Demo/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using System.Net.Http
2 | @using System.Net.Http.Json
3 | @using Microsoft.AspNetCore.Components.Forms
4 | @using Microsoft.AspNetCore.Components.Routing
5 | @using Microsoft.AspNetCore.Components.Web
6 | @using Microsoft.AspNetCore.Components.Web.Virtualization
7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http
8 | @using Microsoft.JSInterop
9 | @using Demo
10 | @using Demo.Shared
11 | @using BlazorHooked
12 | @using Havit.Blazor.Components.Web
13 | @using Havit.Blazor.Components.Web.Bootstrap
--------------------------------------------------------------------------------
/Demo/libman.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0",
3 | "defaultProvider": "cdnjs",
4 | "libraries": [
5 | {
6 | "provider": "cdnjs",
7 | "library": "prism@9000.0.1",
8 | "destination": "wwwroot/lib/prism/",
9 | "files": [
10 | "prism.min.js",
11 | "themes/prism.min.css"
12 | ]
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/Demo/wwwroot/css/app.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
3 | margin: 0;
4 | background: #181a1b;
5 | color: #eee;
6 | }
7 |
8 | article {
9 | margin-top: 1rem;
10 | margin-bottom: 1.5rem;
11 | min-height: calc(100vh - 5.5rem - 48px);
12 | }
13 |
14 | .loading {
15 | min-height: 100vh;
16 | width: 100%;
17 | position: fixed;
18 | top: 0;
19 | display: flex;
20 | color: #fff;
21 | align-items: center;
22 | text-align: center;
23 | justify-content: center;
24 | flex-direction: column;
25 | }
26 |
27 | .loading p {
28 | margin: 0;
29 | }
30 |
31 | #blazor-error-ui {
32 | background: lightyellow;
33 | bottom: 0;
34 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
35 | display: none;
36 | left: 0;
37 | padding: 0.6rem 1.25rem 0.7rem 1.25rem;
38 | position: fixed;
39 | width: 100%;
40 | z-index: 1000;
41 | }
42 |
43 | #blazor-error-ui .dismiss {
44 | cursor: pointer;
45 | position: absolute;
46 | right: 0.75rem;
47 | top: 0.5rem;
48 | }
49 |
50 | .blazor-error-boundary {
51 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
52 | padding: 1rem 1rem 1rem 3.7rem;
53 | color: white;
54 | }
55 |
56 | .blazor-error-boundary::after {
57 | content: "An error has occurred."
58 | }
59 |
60 | /* PrismJS 1.26.0 */
61 | code[class*=language-], pre[class*=language-] {
62 | color: #ccc;
63 | background: 0 0;
64 | font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
65 | font-size: 1em;
66 | text-align: left;
67 | white-space: pre;
68 | word-spacing: normal;
69 | word-break: normal;
70 | word-wrap: normal;
71 | line-height: 1.5;
72 | -moz-tab-size: 4;
73 | -o-tab-size: 4;
74 | tab-size: 4;
75 | -webkit-hyphens: none;
76 | -moz-hyphens: none;
77 | -ms-hyphens: none;
78 | hyphens: none
79 | }
80 |
81 | pre[class*=language-] {
82 | padding: 1em;
83 | margin: .5em 0;
84 | overflow: auto
85 | }
86 |
87 | :not(pre) > code[class*=language-], pre[class*=language-] {
88 | background: #2d2d2d
89 | }
90 |
91 | :not(pre) > code[class*=language-] {
92 | padding: .1em;
93 | border-radius: .3em;
94 | white-space: normal
95 | }
96 |
97 | .token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
98 | color: #999
99 | }
100 |
101 | .token.punctuation {
102 | color: #ccc
103 | }
104 |
105 | .token.attr-name, .token.deleted, .token.namespace, .token.tag {
106 | color: #e2777a
107 | }
108 |
109 | .token.function-name {
110 | color: #6196cc
111 | }
112 |
113 | .token.boolean, .token.function, .token.number {
114 | color: #f08d49
115 | }
116 |
117 | .token.class-name, .token.constant, .token.property, .token.symbol {
118 | color: #f8c555
119 | }
120 |
121 | .token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector {
122 | color: #cc99cd
123 | }
124 |
125 | .token.attr-value, .token.char, .token.regex, .token.string, .token.variable {
126 | color: #7ec699
127 | }
128 |
129 | .token.entity, .token.operator, .token.url {
130 | color: #67cdcc
131 | }
132 |
133 | .token.bold, .token.important {
134 | font-weight: 700
135 | }
136 |
137 | .token.italic {
138 | font-style: italic
139 | }
140 |
141 | .token.entity {
142 | cursor: help
143 | }
144 |
145 | .token.inserted {
146 | color: green
147 | }
148 |
--------------------------------------------------------------------------------
/Demo/wwwroot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Blazor Hooked
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
76 |
77 |
Blazor Hooked
78 |
Loading...
79 |
80 |
81 |
84 | An unhandled error has occurred.
85 |
Reload
86 |
🗙
87 |
Sorry, there's nothing at this address.
30 |
31 |
32 |
33 |
34 | ```
35 |
36 | ### The `HookContext`
37 |
38 | Hooks are accessed via a `HookContext` which you can get one of two ways.
39 |
40 | Inherit from `HookComponentBase` in which case `this.Hook` exposes a single `HookContext` for the child component.
41 |
42 | ```razor
43 | @inherits HookComponentBase
44 |
45 | @{
46 | this.Hook.UseState(0);
47 | }
48 | ```
49 |
50 | Or use the `Hook` component, in which case the `HookContext` is scoped within the `Hook`. This gives more flexibility for
51 | you to inherit from other base components and even to create multiple contexts within a component.
52 |
53 | ```razor
54 |
55 | @{
56 | context.UseState(0);
57 | }
58 | Hello
59 |
60 | ```
61 |
62 | You can rename the context to something more helpful and/or to avoid collisions.
63 |
64 | ```razor
65 |
66 | @{
67 | var (state, _) = Hook.UseState(0);
68 | }
69 |
70 | @state
71 |
72 |
73 | @{
74 | var (state, _) = Hook2.UseState(1);
75 | }
76 |
77 | @state
78 |
79 | ```
80 |
81 | You'll find there are very few classes or interfaces to inherit or implement in BlazorHooked. Actions and state in the
82 | examples are usually defined as records. The more you embrace immutibility the easier the Model View Update pattern becomes
83 | because you stop fighting the render loop and BlazorHooked is designed to foster that by using functional constructs
84 | wherever possible.
85 |
86 | Read on to find out more about [Hooks](https://dibble-james.github.io/blazor-hooked/hooks).
87 |
--------------------------------------------------------------------------------
/assets/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dibble-james/blazor-hooked/1ce028ba51b8e46a0a29e99174c6bd7ba5755a47/assets/logo.ico
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dibble-james/blazor-hooked/1ce028ba51b8e46a0a29e99174c6bd7ba5755a47/assets/logo.png
--------------------------------------------------------------------------------
/blazor-hooked.sln:
--------------------------------------------------------------------------------
1 |
2 | Microsoft Visual Studio Solution File, Format Version 12.00
3 | # Visual Studio Version 17
4 | VisualStudioVersion = 17.1.32120.378
5 | MinimumVisualStudioVersion = 10.0.40219.1
6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorHooked", "BlazorHooked\BlazorHooked.csproj", "{3237E21F-EFE1-4D29-A164-692109D86C4A}"
7 | EndProject
8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Demo", "Demo\Demo.csproj", "{37CEA85B-7E35-4D48-A54B-2451B8842B99}"
9 | EndProject
10 | Global
11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
12 | Debug|Any CPU = Debug|Any CPU
13 | Release|Any CPU = Release|Any CPU
14 | EndGlobalSection
15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
16 | {3237E21F-EFE1-4D29-A164-692109D86C4A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
17 | {3237E21F-EFE1-4D29-A164-692109D86C4A}.Debug|Any CPU.Build.0 = Debug|Any CPU
18 | {3237E21F-EFE1-4D29-A164-692109D86C4A}.Release|Any CPU.ActiveCfg = Release|Any CPU
19 | {3237E21F-EFE1-4D29-A164-692109D86C4A}.Release|Any CPU.Build.0 = Release|Any CPU
20 | {37CEA85B-7E35-4D48-A54B-2451B8842B99}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
21 | {37CEA85B-7E35-4D48-A54B-2451B8842B99}.Debug|Any CPU.Build.0 = Debug|Any CPU
22 | {37CEA85B-7E35-4D48-A54B-2451B8842B99}.Release|Any CPU.ActiveCfg = Release|Any CPU
23 | {37CEA85B-7E35-4D48-A54B-2451B8842B99}.Release|Any CPU.Build.0 = Release|Any CPU
24 | EndGlobalSection
25 | GlobalSection(SolutionProperties) = preSolution
26 | HideSolutionNode = FALSE
27 | EndGlobalSection
28 | GlobalSection(ExtensibilityGlobals) = postSolution
29 | SolutionGuid = {D2E5E14F-5F9E-476F-82F1-3B9FA3793D71}
30 | EndGlobalSection
31 | EndGlobal
32 |
--------------------------------------------------------------------------------