@vovikilelik/react-lens

Utils for lens implementations in react apps

Usage no npm install needed!

<script type="module">
  import vovikilelikReactLens from 'https://cdn.skypack.dev/@vovikilelik/react-lens';
</script>

README

It is the React implementation for lens-js

Wiki

Start

/* Lens core */
import { Lens, ... } from '@vovikilelik/lens-ts';

/* React implementation */
import { useLens, ...and more } from '@vovikilelik/react-lens';

Creation stateless components

You can create Lens component with using useLens() hook, whitch use like useState()

import { Lens } from "@vovikilelik/lens-ts";
import { useLens } from "@vovikilelik/react-lens";

const Counter: React.FC<{ lens: Lens<number> }> = ({ lens }) => {
    const [count, setCount] = useLens(lens);
    return <button onClick={() => setCount(count + 1)}>{ count }</button>
}

/* uses */
<Counter lens={/* Your counter lens */} />

useLens haves able to customize render trigger

/* Simple, means: 'path', 'strict' or 'tree' stage */
const [value, setValue] = useLens(lens, 'path', 'strict');

/* Functional */
const [value, setValue] = useLens(lens, () => /* condition */);

/* Or mixed */
const [value, setValue] = useLens(lens, () => true, 'tree');

For more information about event model see lens-js repository

Creation statefull components

You can create an own class component extending LensComponent<L, P, S>, like React.Component<P, S>, where L is type of Lens node.

import { LensComponent } from "@vovikilelik/react-lens";

interface Props {
    className?: string;
}

export class Counter extends LensComponent<number, Props> {
    public render() {
        const {lens} = this.props;
        const {value} = this.state;
        return <button onClick={ () => lens.set(value + 1) }>{ value }</button>
    }
}

/* uses */
<Counter lens={/* Your counter lens */} />