### Installing Effector Factorio via npm

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet shows the command to install the `effector-factorio` library using npm, a package manager for JavaScript. It's the first step to integrate the library into a project.

```Bash
npm install effector-factorio
```

--------------------------------

### Creating a Model Factory with Effector Factorio in TypeScript

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet demonstrates how to define a model factory using `modelFactory` from `effector-factorio`. It sets up a basic sign-up form model with stores for login and password, events for changes and submission, and an effect for registration, allowing external effects to be passed for customization.

```TypeScript
import { modelFactory } from 'effector-factorio';
import { combine, sample, createStore, createEvent, Effect } from 'effector';

type FactoryOptions = {
  registerFx: Effect<{ name: string; password: string }, any>;
};

export const factory = modelFactory((options: FactoryOptions) => {
  const loginChanged = createEvent<string>();
  const passwordChanged = createEvent<string>();
  const submitPressed = createEvent();

  const $login = createStore('');
  const $password = createStore('');

  const $form = combine({ login: $login, password: $password });

  const $disabled = options.registerFx.pending;

  $login.on(loginChanged, (prev, next) => next);
  $password.on(passwordChanged, (prev, next) => next);

  sample({
    source: $form,
    clock: submitPressed,
    target: options.registerFx,
  });

  return {
    $login,
    $password,
    $disabled,
    loginChanged,
    passwordChanged,
    submitPressed,
  };
});
```

--------------------------------

### Creating a React View with Effector Factorio's modelView

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet illustrates how to create a React view component using `modelView` from `effector-factorio`. It wraps a main `Form` component and defines sub-components (`LoginField`, `PasswordField`, `RegisterButton`) that access the model instance via `factory.useModel()` and `useStore` to interact with the Effector stores and events.

```TypeScript
import { useStore } from 'effector-react'
import { modelView } from 'effector-factorio'

import { factory } from './factory' // from step 1

const Form = modelView(factory, () => {
  return (
    <div className="flex flex-col gap-2">
      <LoginField />
      <PasswordField />
      <RegisterButton />
    </div>
})

const LoginField = () => {
  const model = factory.useModel()
  const login = useStore(model.$login)

  return <input
    value={login}
    placeholder="Login"
    onChange={evt => model.loginChanged(evt.target.value)}
  />
}

const PasswordField = () => {
  const model = factory.useModel()
  const password = useStore(model.$password)

  return <input
    value={password}
    placeholder="Password"
    onChange={evt => model.passwordChanged(evt.target.value)}
  />
}

const RegisterButton = () => {
  const model = factory.useModel()
  const disabled = useStore(model.$disabled)

  return (
    <button
      disabled={disabled}
      onClick={() => model.submitPressed}
    >
      Save
    </button>
  )
}
```

--------------------------------

### Using Effector Factorio Model and Form in a React Component

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet demonstrates how to instantiate a model from the exported factory and pass it to the `Form` component. It shows the final step of integrating the `effector-factorio` pattern into a React page, allowing the form to operate with its specific model instance.

```TypeScript
import { CreateUser } from '@/features/create-user';

const createUserModel = CreateUser.factory.createModel({
  registerFx: registerUserFx,
});

const Page = () => {
  return <CreateUser.Form model={createUserModel} />;
};
```

--------------------------------

### Exporting Factory and Form Components in TypeScript

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet shows how to export the created `factory` and `Form` components as a single object, `CreateUser`. This pattern facilitates organized access and re-usability of the model and its associated view components throughout the application.

```TypeScript
export const CreateUser = {
  factory,
  Form,
};
```

--------------------------------

### Extracting Model Type with Model<Factory> in TypeScript

Source: https://github.com/kelin2025/effector-factorio/blob/main/README.md

This snippet illustrates how to use the `Model<Factory>` utility type from `effector-factorio` to infer the exact type of a model returned by a `modelFactory`. It demonstrates that `FooModel` correctly resolves to `{ foo: Store<string> }`, reflecting the structure defined within `fooFactory`.

```tsx
import { modelFactory, Model } from 'effector-factorio';

const fooFactory = modelFactory(() => {
  return {
    foo: createStore(''),
  };
});

type FooModel = Model<typeof fooFactory>;
// { foo: Store<string> }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.