Update from a component

Intro

Inside a component, when you register a ripple hook, it looks like a normal useState, except that it takes the name of the ripple. Use the ripple to get any values and use the updater to update the ripple.

The updater is used with or without parameters, depending on the action you want to take. By default, it will apply all current modifications that you made on the ripple object.

Example

my-lake.ts

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

const lake = createRipples({
  counter : { count: 0}
});

export const  rippleHooks    = lake[0];
export const  rippleServices = lake[1];

my-component.tsx

import { rippleHooks } from './my-lake';
const { useCounter } = rippleHooks;

const MyComponent = () => {
  const [counter, setCounter] = useCounter();
  const { count } = counter;

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => {
        counter.count++;
        setCounter();
      }}>Increment</button>
    </div>
  );
};

In this example, we modify the counter object directly and then we call the updater without any parameters. Calling the updater without parameters will apply all modifications that you made on the ripple object.

Updater parameters

The updater can also be used with parameters to apply only some modifications.

Function	Parameter	value	Description	Trigger a render
setCounter	void		Apply all pending changes	true
setCounter	string	restore	Cancel the current local modification	false
setCounter	string	reset	Reset the ripple to its initial state	true
setCounter	string, TRipple	replace, Object	Replace the current ripple state with a new one, does not impact the initial state in case of reset	true

example

// Apply all pending changes
// setCounter(void);
setCounter();

// Cancel the current local modification
// setCounter('restore');
setCounter('restore');

// Reset the ripple to its initial state
// setCounter('reset');
setCounter('reset');

// Replace the current ripple state with a new one,
// does not impact the initial state in case of reset
// setCounter('replace', typeof counter);
setCounter('replace', { count: 0 });

Parent / Child approach

The update can be done from any component as this Ripple is shared between all components that use it. So If you want to adopt a Parent / Children approach, you can do it easily.

Parent

const Parent = () => {
  const [counter, setCounter] = useCounter();

  return (
    <MyComponent
      increment={() => {
        counter.count++;
        setCounter();
      }}

      reset={() => {
        setCounter("reset");
      }}
    />
  );
};

Style

const styles = {
  div: {
    border  : "1px solid white",
    width   : "110px",
    padding : 10,
  },
  button: {
    width: "100%",
  },
  p: {
    textAlign    : "center",
    borderBottom : "1px solid white",
  },
} as { [key: string]: CSSProperties }

Children

/**
 * Here we do not pass the count value to the component
 * because it is already available in the ripple.
 */
const MyComponent = ({ increment, reset }) => {
  const [{count}] = useCounter();

  return (
    <div style={styles.div}>
      <p style={styles.p}>Counter: {count}</p>
      <button style={styles.button} onClick={increment}>Increment</button>
      <button style={styles.button} onClick={reset}>Reset</button>
    </div>
  );
};

---

See it in action

Try it yourself here

Counter: 1