seed-quickstart-hooks

Example of how react style hooks might integrate with Seed.

Stars
5

Seed Quickstart (React Style Hook Example)

Introduction

This is an evolving example demonstrating how React style hooks might integrate into Seed.

It requires nightly due to reliance on the track_caller feature and currently the topo crate.

To get started:

  • Clone this repo: git clone https://github.com/rebo/seed-quickstart-hooks.git

  • The key difference between this quickstart and the normal example app is that this makes use of the use_state() api in order to store state that persists over renders and is associated with an identifiable component.

  • use_state takes a closure that returns type T it returns a tuple of the type's current value and an accessor struct that can be used to modify that value. Often you would use the accessor struct to modify the value from a javascript callback such a Ev::Click event. See themy_button() function.

  • Component's need their functions annoted with #[topo::nested] and there needs to be an ultimate root component usually called in the main app view root.

  • Building this example app will create a div containing 5 buttons each with their own internal state.

  • If you don't have Rust and cargo-make installed, Download it, and run the following commands:

rustup update

rustup target add wasm32-unknown-unknown

cargo install --force cargo-make

Run cargo make build in a terminal to build the app, and cargo make serve to start a dev server on 127.0.0.1:8000.

If you'd like the compiler automatically check for changes, recompiling as needed, run cargo make watch instead of cargo make build.