@effector/reflect

@effector/reflect

☄️ Attach effector stores to react components without hooks.

Install

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

Getting started | API Docs

Motivation

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.

Release process

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