https://github.com/react-declarative/react-declarative-lite
https://github.com/react-declarative/react-declarative-lite
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/react-declarative/react-declarative-lite
- Owner: react-declarative
- License: mit
- Created: 2024-07-19T07:35:26.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T16:10:04.000Z (9 months ago)
- Last Synced: 2024-09-18T18:44:04.214Z (9 months ago)
- Language: TypeScript
- Size: 2.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚛️ react-declarative-lite
> The `lite` verion of the [react-declarative](https://github.com/react-declarative/react-declarative)
[](https://npmjs.org/package/react-declarative-lite)
This is a lighter version of [react-declarative](https://www.npmjs.com/package/react-declarative) which exports the `` component and dependencies only and as such makes the library slightly faster and smaller. Unlike `react-declarative`, it doesn't provide any additional overhead like state management. For a note, that library should be used when you want to use `` forms in existing app
## Contribute
> [!IMPORTANT]
> Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated
## Usage
```bash
npm install react-declarative-lite
```
## Example
```tsx
import { One, TypedField, FieldType, getInvalidFields } from "react-declarative-lite";
export const fields: TypedField[] = [
{
type: FieldType.Outline,
fields: [
{
type: FieldType.Typography,
typoVariant: 'h6',
placeholder: 'Example form',
},
{
type: FieldType.Text,
validation: {
required: true,
numeric: true,
minNum: 5
},
name: 'first_field',
},
{
type: FieldType.Text,
validation: {
required: true,
},
name: 'second_field',
},
{
type: FieldType.Text,
validation: {
required: true,
},
name: 'third_field',
},
{
type: FieldType.Button,
sx: {
mt: 3
},
buttonVariant: 'contained',
title: 'Submit',
click: (name, e, data, payload) => {
const errors = getInvalidFields(fields, data, payload);
if (errors) {
const [error] = errors;
notify(`${error.title}: ${error.error}`);
} else {
notify("The form is valid");
}
},
}
]
}
];
...
```