Home

Awesome

<div align="center"> <a href="https://easy-form.github.io/react-form-simple" target="_blank"> <img src="./public//logo.jpg" alt="React-form-simple logo" width="100%"> </a> </div> <br /> <div align="center">

CI NPM version NPM downloads Static Badge Static Badge Static Badge NPM npm bundle size (version) npm bundle size (version)

<div> English | <a href="https://github.com/easy-form/react-form-simple/blob/master/README.zh-CN.md">简体中文</a> </div> </div> <br />

📚 Documentation

✨ Features

📦 Installing

Using NPM

npm install react-form-simple

Using Yarn

yarn add react-form-simple

🔨 Usage

Create form items using the 'render' function

import { useForm } from 'react-form-simple';

const { render } = useForm(fields, [config]);

Create form items in component form

import { Form, FormItem } from 'react-form-simple';

💻 Demo

import Button from '@components/Button';
import React from 'react';
import { useForm } from 'react-form-simple';

export default function App() {
  const { render, model } = useForm({
    name: '',
    age: '',
  });
  const renderName = render('name')(<input className="input" />);

  const renderAge = render('age')(<input className="input" />);

  const renderSubmit = (
    <Button onClick={() => console.log(model)}>submit</Button>
  );
  return (
    <>
      {renderName}
      {renderAge}
      {renderSubmit}
    </>
  );
}

🎧 Watch

import Button from '@components/Button';
import React from 'react';
import { useForm } from 'react-form-simple';

export default function App() {
  const { render, model, useWatch } = useForm({ name: '' });

  const renderName = render('name')(<input className="input" />);

  useWatch(
    ({ model }) => [model.name],
    (value) => {
      /** code */
    },
  );

  return (
    <>
      {renderName}
      {renderAge}
    </>
  );
}

📄 Unit Test

<div > <img src="./public/unit-test01.jpg" alt="unit-test" width="80%"> </div> <div > <img src="./public/unit-test02.jpg" alt="unit-test" width="80%"> </div>

🤝 Community

<div align="center">Join WeChat Group</div>

<div align="center"> <img src="./public/wechat-group.jpg?v=3" alt="wechat-group" width="30%"> </div>

📝 License

MIT