Ripple Lake

To be able to use a ripple inside your component, you need to declare it in a ripple Lake. You can create as many lakes as you want. Start by creating a new file in your project, for example ripple-lake.ts;

ripple-lake.ts

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

To initialize a Lake just call the createRipples and add all the ripples you want to use:

Lake definition

// Ripple definition
const globalRipple = {
  value1: "value1"
};

// Other ripple definition
const ripple1 = {
  value1: "value1"
};

// Lake definition
const [hooks, services] = createRipples({
  globalRipple,
  ripple1
});

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

Lake as repository

A lake is a conceptual word to define a repository of data, I like to call it lake as all the ripples belongs to it. Then you can use the rippleHooks in your components, and rippleServices from outside the components:

The method createRipples returns an array of two elements, the first one is the hooks and the second one is the external updaters. Hooks is an object that will contain as many hooks as ripples you have declared.

Updaters is an object that will contain as many updaters as ripples you have declared. The updaters are functions that will allow you to update the ripples from anywhere in your code.

Thanks to typescript advance types, the hooks will be typed with the ripple type automatically. For example here Hooks will have this type:

type THookUpdateAction = void | "restore" | "reset" | "replace";
type TRipple = ReturnType<typeof useGlobalRipple>
{
  useGlobalRipple: () => [
    ripple: { value1: string },
    setRipple: <T extends TRipple>(action: THookUpdateAction, replacedValue ?: T) => void) => void
  ];
  useRipple1: () =>  [
    ripple: { value1: string },
    setRipple: <T extends TRipple>(action: THookUpdateAction, replacedValue ?: T) => void) => void
  ];;
}

and the services will have this type:

type TAction<T> = void | "restore" | "reset" | T;
{
  setGlobalRipple: <T extends typeof globalRipple>(void | (ripple: T) => TAction<T>) => T;
  setRipple1:  <T extends typeof ripple1>(void | (ripple: T) => TAction<T>) => T;
}

Using inside components

component-one.ts

import { rippleHooks } from "./ripple-lake";
const { useGlobalRipple } = rippleHooks;

const ComponentOne = () => {
  const [globalRipple, setGlobalRipple = useGlobalRipple();

  return <div>{globalRipple.value1}</div>;
};

You can also destructure the hooks directly in the component declaration:

component-one.ts

import { rippleHooks } from "./ripple-lake";
const { useGlobalRipple } = rippleHooks;

const ComponentOne = () => {
  const [globalRipple, setGlobalRipple = useGlobalRipple();
  const { value1 } = globalRipple;

  return <div>{value1}</div>;
};

Now each time you update the globalRipple from any component or anywhere outside React, all the components that use it will be updated. This simplify the refresh of the data without the need to register for any update. Only the visible components that use the hook will be updated.