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 f39bf4f7de lens-js 1.5.0 2 months ago
nbproject init 6 months ago
src lens-js 1.5.0 2 months ago
.gitignore add class component 6 months ago
LICENSE license 5 months ago
index.d.ts npm 1.0.1 6 months ago
index.js init 6 months ago
package-lock.json lens-js 1.5.0 2 months ago
package.json lens-js 1.5.0 2 months ago
readme.md default mapper 2 months ago
tsconfig.json add class component 6 months ago
webpack.config.js init 6 months ago

readme.md

Links

react-lens

It is the utils for easy implementation lens-ts on react-apps.

Creation own components

FC

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

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

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

Class

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

Covering

Covering native components

Pattern of covering native components looks like:

import { createLensComponent, getHtmlLikeModel } from "@vovikilelik/react-lens";

const LensInput = createLensComponent<string>(
    <input />,
    getHtmlLikeModel()
);

Covering custom components

Example of covering any component, like <Input text='' onTextChanged={} />

/* Any component */
interface Props {
    text: string;
    onTextChanged: (text: string) => void;
}
const Input: React.FC<Props> = (props) => { /* implementation */ }

/* Covering */
const inputModel = {
    getter: {name: 'text', mapper: v => v},
    setter: {name: 'onTextChanged', mapper: v => v}
}
const LensInput = createLensComponent<string, Props>(Input, inputModel);

/* Uses */
<LensInput lens={anyLens} />

Using lens-components

Make store.ts

interface Store {
	anInput: string;
}

const store: { lens: Store } = { lens: { anInput: '' } };

export lens = new Lens<Store>(
	() => store.lens,
	(data) => { store.lens = data; }
);

Import and use

import { lens } from './store';

const Application: React.FC = () => {
    const anInputLens = lens.go('anInput');

    return (
        <div>
            <div>Lens Component</div>
            <LensInput lens={anInputLens} />
        </div>
    )
}