https://github.com/dukkk3/formix
⚡ Fast, convenient and easy. Build forms in React with pleasure
https://github.com/dukkk3/formix
frontend mobx mobx-react-lite react reactjs typescript
Last synced: 5 days ago
JSON representation
⚡ Fast, convenient and easy. Build forms in React with pleasure
- Host: GitHub
- URL: https://github.com/dukkk3/formix
- Owner: dukkk3
- License: mit
- Created: 2021-10-20T14:53:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-14T01:33:41.000Z (over 3 years ago)
- Last Synced: 2025-08-29T05:30:01.822Z (10 months ago)
- Topics: frontend, mobx, mobx-react-lite, react, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 2.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Formix
react-formix is a package that allows you to quickly and easily create controlled forms
#### Description is in progress 👨💻
There may be inaccuracies and incomprehensible examples :)
## Get Started
### 🐇 Quick Start
```git
npm i react-formix mobx
```
```js
import React from "react";
import { useFormix } from "react-formix";
export const Form: React.FC = () => {
const myForm = useFormix({
user: {
firstname: "",
surname: "",
},
});
return (
);
};
```
## Hooks
### useFormix
```js
import React from "react";
import { useFormix } from "react-formix";
export const Form: React.FC = () => {
const myForm = useFormix({
user: {
firstname: "",
surname: "",
},
});
return (
{/* OR */}
);
};
```
### useField
```js
import React from "react";
import { useField } from "react-formix";
export const MyField: React.FC = () => {
const myField = useField("fieldname", { defaultValue: "" });
return ;
};
```
## Components
### Formix
```js
import React from "react";
import { Formix } from "react-formix";
export const MyForm: React.FC = () => {
return (
{({ $, bind }) => {
return (
<>
>
);
}}
);
};
```
### Field
Field is a simple component that renders the required field from the available ones (by default: input, textArea or select) and passes props to it.
```js
import React from "react";
import { useFormix, Field } from "react-formix";
export const MyForm: React.FC = () => {
const myForm = useFormix({ nickname: "" });
return (
{/* As input */}
{/* Or */}
{/* As select */}
{/* As textArea */}
);
};
```
or you can create a custom Field
```js
import React, { forwardRef } from "react";
import { useFormix, fieldFactory } from "react-formix";
export const MyInput = forwardRef>((props, ref) => {
return ;
});
export const MyTextarea = forwardRef>(
(props, ref) => {
return ;
}
);
export const MyField = fieldFactory(
{
myInput: MyInput,
myTextarea: MyTextarea,
// you can pass the default key (in this case: myInput)
},
"myInput"
);
export const MyForm: React.FC = () => {
const myForm = useFormix({ nickname: "" });
return (
{/* Or */}
);
};
```
## Helpers
### formSchema
```js
import React from "react";
import { useFormix, formSchema, field } from "react-formix";
const schema = formSchema({
user: {
firstname: "",
surname: field({
defaultValue: "",
validate: (value) => (typeof value === "string" && value.includes("test") ? "some error" : ""),
}),
},
});
export const MyForm: React.FC = () => {
const myForm = useFormix(schema);
return (
{/* OR */}
);
};
```
### field
```js
import React from "react";
import { useField, field, Field } from "react-formix";
const firstnameField = field({
defaultValue: "",
validate: (value) => (typeof value === "string" && value.includes("test") ? "some error" : ""),
});
export const MyForm: React.FC = () => {
const myField = useField("firstname", firstnameField);
return (
);
};
```