Shaking React Form: Build React Form Easily

announce
1

Hi everyone, I just published a new project: Shaking React Form, to help build react forms with validations easily. I Hope you’d love to use and help maintain and develop.:slight_smile:

github

a tiny demo:

import ShackingForm from 'shaking-react-form';
import RawShakingReactFormField from 'raw-shaking-react-form-field';

const schemas = {
    username: {
        label: 'Username',
        validate(v){
            if (!v) return 'username is required'
        },
        options: {
            placeholder: 'input username'
        }
    },

    password: {
        label: 'Password',
        type: 'password',
        validate(v){
            if (!v || v.length < 6) return 'password cannot be less than 6 letters'
        }
    },
}

class SomeReactComponent extends React.Component {
    // you can save form values as you like, here is just for convenience saving them directly into state
    constructor(props) {
        super(props);
        this.state = {};
        Object.keys(schemas).forEach(key=>this.state[key] = null);
    }

    render() {
        return <div>
        <ShackingForm
        schemas={schemas}
        values={this.state}
        onChange={(values)=>{this.setState(values)}}
        onSubmit={(values)=>console.log('submit', values)}
        onErrors={(errors)=>console.log('errors', errors)}
        fieldClass={RawShakingReactFormField}
            >
            <button type="submit">Submit</button>
            </ShackingForm>
            </div>
    }
}
5 Likes
2

Interesting thing !
will use in next login form.:grin:

3

thanks for support :slight_smile:
as its new, if you find any problem or have any suggestion, please tell us
let’s build it together

4

Thanks for support. I have pushed a new version 1.0.x, now it’s much easier to create your own field class.
Although there are some break changes in some field types such as group.*, but now they are more straightforward to use.
If you already used the old version, please check the doc.

1 Like
5

hello, nice. Is it possible to use aldeed:simple-schema ?

6

as you see, the schema is different from simple-schema, so you can’t use ss directly.
it is possible to write a mapper to convert ss into srf schema, you can try and contribute to us, thanks :slight_smile:
once I figure out the relation between them, I will also try to write such a mapper

7

I hope this gets more attention. Looks very promising!

8

Nothing in 3 months – what ever come to this? I’m looking at doing something like this for one of my forms right now in fact.

Do you have any client side/form validations – for example if radio button 1 is Yes, the show FIelds 1 and 2? Or how about masking, where you have to enter a phone number in correctly?

Looking at the repo the orgininal is depreciated in favor of rf-form, but even rf-form has no activity in 3 months.

The RF-Form demo is nice.