Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/effector/reflect below:

effector/reflect: Easily render React components with everything you love from ☄️ effector.

☄️ Attach effector stores to react components without hooks.

npm install @effector/reflect
# or
pnpm add @effector/reflect

Getting started | API Docs

What's the point of reflect?

It's the API design that, using the classic HOC-like pattern, allows you to write React components with Effector in an efficient and composable way.

import { reflect, variant } from '@effector/reflect';

export function UserForm() {
  return (
    <FormCard>
      <Name />
      <LastName />
      <SubmitButton />
    </FormCard>
  );
}

const Name = reflect({
  view: Input,
  bind: {
    value: model.$name,
    onChange: model.nameChanged,
  },
});

const LastName = reflect({
  view: Input,
  bind: {
    value: model.$lastName,
    onChange: model.lastNameChanged,
  },
});

const SubmitButton = reflect({
  view: Button,
  bind: {
    type: 'submit', // plain values are allowed too!
    disabled: model.$formValid.map((valid) => !valid),
    onClick: model.formSubmitted,
  },
});

Here we've separated this component into small parts, which were created in a convenient way using reflect operators, which is a very simple description of the props -> values mapping, which is easier to read and modify.

With @effector/reflect, our $formValid update will only cause the SubmitButton to be re-rendered, and for all other parts of our <UserForm /> there will literally be zero React work.

To learn more, please read the full Motivation article.

1. Check out the draft release.
2. All PRs should have correct labels and useful titles. You can review available labels here.
3. Update labels for PRs and titles, next manually run the release drafter action to regenerate the draft release.
4. Review the new version and press "Publish"
5. If required check "Create discussion for this release"

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4