Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Overview

Lenses in React

Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Example

You can construct a lens/React Provider by just providing the shape of your application state

(); export { LensProvider }; ">
// LensProvider.ts

import { create } from "react-lenses";
import type { State } from "./application-state";

const { LensProvider } = create<State>();

export { LensProvider };

The lens itself is provided via a children function to LensProvider. This is an intentional decision to encourage using the lens as a prop from the root of your application UI.

// App.tsx

import type { State } from './application-state';
import { Root } from './Root';
import { LensProvider } from './LensProvider';

export const App = () => {
  const state: State = { ... };

  <LensProvider value={state} onChange={...}>
    {lens => {
      <Root state={lens} />
    }}
  </LensProvider>
}

The lens can be focused by regular member access.

; }; export const Root = (props: Props) => { return ; }; ">
// Root.tsx

import { Lens } from "react-lenses";
import type { State } from "./application-state";
import { Profile } from "./Profile";

type Props = {
  state: Lens<State>;
};

export const Root = (props: Props) => {
  return <Profile state={props.state.user.profile} />;
};

And then the underlying data it can be accessed by collapsing the lens into a React hook with useState.

setProfile(ev.target.value)} />; }; ">
// Profile.tsx

type Props = {
  state: Lens<{ name: string; email: string }>;
};

const Profile = (props: Props) => {
  const [profile, setProfile] = props.state.useState();

  return <input type="text" value={profile.name} onChange={(ev) => setProfile(ev.target.value)} />;
};
You might also like...
User interface for Trunion web app

Tronion UI Run dev server: npm run dev Home page is in pages/index.js, the user pages are in pages/account directory, theme file utils/theme.js, modal

This is a Web User Interface Sample Project. Using ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc.

ogmeta Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc. E

JavaScript and TypeScript finite state machines and statecharts for the modern web.
JavaScript and TypeScript finite state machines and statecharts for the modern web.

JavaScript state machines and statecharts JavaScript and TypeScript finite state machines and statecharts for the modern web. 📖 Read the documentatio

🔍 A package with components for building your dream command palette for your web application.
🔍 A package with components for building your dream command palette for your web application.

A command palette for React A package with components for building your dream command palette for your web application. Features Installation Example

A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

Like useRef, but with lifecycle and ref merging support

useLifecycleRef Like useRef, but with lifecycle and ref merging support Quick Look Here is a simplfied demonstration on how easy to use useLifecycleRe

Simple and powerful state management in React and Preact
Simple and powerful state management in React and Preact

Remini Simple and powerful state management in React and Preact Easy to learn Small and quick From tiny to complex apps Get started At first you have

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

Owner
Gabe Scholz
"Programs must be written for people to read, and only incidentally for machines to execute."
Gabe Scholz
This project is created to demonstrate the uses of various services delivery models with the help of a simple application.

CCET-IA-2 This project is created to demonstrate the uses of various services delivery models with the help of a simple application. Notes On Cloud No

null 4 Sep 18, 2022
A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board ?? A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

Nishant Mogha 4 Sep 12, 2022
A React Typescript search interface for the popular Giphy.com service.

giphy-search A React Typescript search interface for the popular Giphy.com service. Lets get to it Scope We want you to create a search interface for

null 1 May 18, 2022
Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

React Facebook Components Components Facebook provider (provide settings to child components) Login button (provide user profile and signed request) L

Zlatko Fedor 734 Sep 13, 2022
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

Sergey 87 Sep 13, 2022
NativeWind uses Tailwind CSS as high-level scripting language to create a universal design system

NativeWind Note tailwindcss-react-native is current working on v2, which includes a renaming of the project to NativeWind! NativeWind is still under d

Mark Lawlor 879 Sep 29, 2022
In this demo, I am using a library created by me, called 'aesthetic-state' for global state managment in React

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dany Beltran 2 Oct 21, 2021
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

Sergio 1 May 5, 2022
The LinkedIn Learning course React.js: Building an Interface

React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available

MOHAMMED KHORMI 1 Oct 14, 2021
React Translator is a Web Interface created for make the creation of locales.json more easier.

React Translator is a Web Interface created for make the creation of locales.json more easier. Theses locales files can be used in the package @oneforx/react-translator

null 1 May 27, 2022