React inspired library for Xamarin.Forms
Switch branches/tags
Nothing to show
Clone or download
Latest commit 43b2771 Aug 27, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
samples Refactored virtual DOM functions and added samples Jul 6, 2016
src Updating Xamarin.Forms Aug 27, 2017
tests/MassivePixel.Clay.Tests Unit testing Aug 30, 2016
.gitignore Initial commit Jun 23, 2016
LICENSE Initial commit Jun 23, 2016
README.md Updated README.md Aug 30, 2016
appveyor.yml Update appveyor.yml Aug 27, 2017

README.md

Clay - React inspired library for Xamarin.Forms

Build status NuGet Pre Release license

Motivational example

In our Xamarin app let's create a new page and instead of using XAML, use ClayComponent:

MainPage = new ContentPage();
VirtualDOM.Render(new Counter(), MainPage);

The component itself is a special class that can rebuild it's UI:

public class Counter : ClayComponent<int>
{
    public override Node Render()
        => h(new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            Children =
            {
                new Label
                {
                    Text = $"Current value = {State}"
                },
                new Button
                {
                    Text = "+",
                    Command = new Command(inc)
                }
            }
        });

    void inc()
    {
        SetState(State + 1);
    }
}

The h function is responsible for maintaining virtual representation of our view. There are several different overrides accepting different kinds of inputs, but the one in this sample can take an existing Xamarin.Forms.View and recreate nodes from the real view.

On each button click a new state is set which triggers redrawing the entire UI. However, UI is not rebuilt from scratch. Instead, UI is simply updated where it needs to be keeping the list of changes to a minimum.

status

NOTE: The project is still work in progress.

Build

Library is being developed inside Xamarin Studio 6.

Roadmap

Our virtual DOM implementation is far from complete and currently simply redraws the entire UI. This needs tbe developed properly with XAML specific features in mind like attached properties, data virtualization in lists, attached collections (triggers and behaviors), static resources and many more.

Contributions

All are welcome.

License

Licensed under MIT licence.