https://github.com/nimahkh/formact
Reactjs Form generator
https://github.com/nimahkh/formact
react react-form-addons react-form-component react-form-generator react-form-validation react-form-validator react-forms reactjs
Last synced: 6 months ago
JSON representation
Reactjs Form generator
- Host: GitHub
- URL: https://github.com/nimahkh/formact
- Owner: nimahkh
- Created: 2019-05-22T18:55:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:48:40.000Z (about 3 years ago)
- Last Synced: 2025-09-02T06:33:43.271Z (6 months ago)
- Topics: react, react-form-addons, react-form-component, react-form-generator, react-form-validation, react-form-validator, react-forms, reactjs
- Language: JavaScript
- Size: 5.02 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
#### Formact is a react form generator component
#### install
`
npm i @nimahkh/formact
`
#### How to use
```
//App.js
import React, {Fragment, useState} from 'react';
import ReactDOM from 'react-dom';
import Field from '../../src';
import FieldStyle from "./FieldStyle";
const App = (props) => {
const [value, setValue] = useState("");
function handleChange(e) {
const inputValue = e.target.value;
setValue(inputValue)
}
return (
handleChange(e)}/>
)
};
ReactDOM.render(, document.getElementById('root'));
```
```
//FieldStyle.js a simple jss override styling example
import Field from "../../src/Components/Field";
import React from "react";
import withStyles from "react-jss"
const styles={
container:{
backgroundColor: "#ccc"
},
inputStyle: {
minWidth: '200px',
minHeight:'40px',
appearance: 'none !important',
border: "1px solid blue",
borderRadius: 5,
boxSizing: "border-box",
fontSize: "0.9rem",
padding: "1rem 0.5rem",
marginBottom: 10,
'&:required': {
border: '1px solid #333'
},
'&:hover': {
border: '1px solid #333'
}
}
}
function FieldStyle (props){
const {classes}=props;
return(
)
}
export default withStyles(styles)(FieldStyle)
```
#### features
- jss
- material and none-material styles
- full props control
- full class override
#### for now
- supporting text and text area
- overriding label and container classes
- two styles group ( material , bootstrap)
#### Road map
- support RTL
- validations
- checkboxes
- radio boxes
- buttons
- drop downs
- fieldSets
- step forms