🐶 SVG and DOM Events: Rx+JSX experiment updates

With 0.0.8 update Recks receives SVG support 🖼

function App() {
  return <svg width="300" height="200" stroke="#16b3ff" fill="white">{
    range(0, 200, animationFrameScheduler).pipe(
      map(r => <circle cx="150" cy="100" r={r / 4} />),
      repeat()
    )
  }</svg>
}

Run this example:

NOTE: you can drag-open the code editor from the left side

Also event Subjects

Note that 0.0.7 update lets us pass Observers as event handlers 🔥:

function App() {
  const clicks$ = new Subject();

  const count$ = clicks$.pipe(
    startWith(0),
    scan(acc => ++acc)
  );

  return <button onClick={clicks$}>Clicked {count$} times</button>
}

Run this example:

Try it!

To try Recks locally, run:

git clone https://github.com/recksjs/recks-starter-project.git
cd recks-starter-project
npm i
npm start

Have fun!

☝️ If you want to be the first to hear about project updates — be sure to follow me here, on twitter, or watch the project directly @ github!

The End 🐕

header photo by Patrick Hendry on Unsplash

Comments

[John Carroll]

Note that 0.0.7 update lets us pass Observers as event handlers 🔥

That's such a nice way of handling two-way data binding!

[Kostia Palchyk]

Thanks, John!
I'm glad you're keeping your eye on the project 🙂

Yeah, a two-way binding with all the RxJS capabilities!
And more features to come 🙌