You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
svinokot ca57612af6 fix array creation 1 month ago
.vscode lens update to v1.6.3 8 months ago
nbproject lens update to v1.6.3 8 months ago
src 2.0.4 1 month ago
.gitignore lens update to v1.6.3 8 months ago
LICENSE lens update to v1.6.3 8 months ago
index.d.ts lens update to v1.6.3 8 months ago
index.js lens update to v1.6.3 8 months ago
package-lock.json fix array creation 1 month ago
package.json fix array creation 1 month ago
readme.md fix array creation 1 month ago
tsconfig.json 2.0.4 1 month ago
webpack.config.js 2.0.4 1 month ago

readme.md

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>
}

`useLens` will automatically re-render component if lens node has been changed externally.

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

useLens haves able to customize render trigger

/* Simple, means: 'before', 'strict' or 'after' stage */
const [value, setValue] = useLens(lens, 'before', '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 */} />