Ripple | Ripple

As simple as 1, 2, 3

Ripple lets you focus on rendering. No subscribe, just use the state you need, it will render in case of any change.

Separation of concerns... or not

Business logic in a ViewComponent or in a Service ? it's up to you. Ripple works with and withotu hooks.

Easy to debug

Use the debug inspector to see what's going on. State inspector, history inspector, and time travel available

What is Ripple ?

Ripple is a state management library for React. It's a simple and powerful alternative to Redux / Recoil / MobX...

Create a ripple with an initial state, and use it in your components. Keep the logic in the component or in a service, it's up to you.

No need for any subscription, Ripple will render your component in case of any change. Even from a service, it will not break the hook lifecycle.

It is just easy pizy lemon squeezy !!

How simple is it to use ?

From a component, a service, or a hook, just use the state you need.

Define in the Lake the ripple state you want, export the hooks for React usage, and the service for business logic.

Just see it in action !!

Counter: 0

Lake definition
Service
Component
Component full hook

import { createRipples } from "@m-c2/ripple";

// Lake definition
const [hooks, services] = createRipples({
  counter: {
    value: 0
  }
});

// Export the hooks
export const rippleHooks    = hooks;
// Export the services
export const rippleServices = services;

import {rippleServices} from "./HomePage";
const {updateCounter} = rippleServices;

class HomeService {
    private counterInterval = 0;
    constructor(private setCounter = updateCounter()) {}

    start() { // start the counter
      this.counterInterval = setInterval(() => {
          this.setCounter(_ => {_.value++}); // update the counter
      }, 1000) as any;
    }

    stop() { // stop the counter
      clearInterval(this.counterInterval);
    }
}

export const homeService = new HomeService();

import React from "react";
import {rippleHooks} from "./HomePage";
import { homeService } from "./HomeService";

const {useCounter} = rippleHooks;

export default function Counter() {
  const [{value}] = useCounter();

  React.useEffect(() => {
    homeService.start();
    return () => homeService.stop();
  }, []);

  return (
    <div><span>Counter: </span><span>{value}</span></div>
  );
}

import React from "react";
import {rippleHooks} from "./HomePage";

const {useCounter} = rippleHooks;

export default function Counter() {
  const [counter, setCounter] = useCounter();

  React.useEffect(() => {
    const idx = setInterval(() => {
      counter.value++;
      setCounter();
    }, 1000);

    return () => clearInterval(idx);
  }, []);

  return (
    <div><span>Counter: </span><span>{counter.value}</span></div>
  );
}