Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding React UI Components to Blazor Web Assembly Application
dotnet new blazorwasm -n BlazorJsSample
<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script>
window.RenderProgressBar = (count) => {
const Progress = () => React.createElement(
Fabric.ProgressIndicator,
{
'label': 'React Counter',
'description': count,
'percentComplete': (count % 10) * 0.1
},
null
);
ReactDOM.render(Progress(), document.getElementById('reactProgressBar'));
}
</script>
@page "/counter"
@inject IJSRuntime Jsr
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<div id="reactProgressBar"></div>
@code {
private int currentCount = 0;
private async void IncrementCount()
{
currentCount++;
await Jsr.InvokeVoidAsync("RenderProgressBar", currentCount);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.