Nautilus: Pelagic Mollusc

    react-collectable

    0.6.0 • Public • Published

    react-collectable

    Promise-based form validation logic for React.

    Approach:

    • based on Promises
    • declarative, JSX-oriented
    • some assembly effort required
    • composition using function-as-child technique

    Brief feature outline:

    • asynchronous validation support
    • pluggable, minimal and flexible

    Sample Code

    Sample code:

    <Context>{(collect) => <Map>{(Parameter) =>
        <form onSubmit={() => doSomeAction(collect())} action="javascript:void(0)">
            <Parameter name="name"><Status>{(error, isPending) =>
                <label data-error={!!error}>
                    <span>Name</span>
                    <Input filter={requireText}><input
                        type="text"
                        placeholder="Enter Email"
                    /></Input>
                </label>
            }</Status></Parameter>
    
            <Parameter name="email"><Status>{(error, isPending) =>
                <label data-error={!!error}>
                    <span>Email</span>
                    <Input filter={requireText}><input
                        type="text"
                        placeholder="Enter Email"
                    /></Input>
                </label>
            }</Status></Parameter>
    
            <button type="submit">Submit</button>
        </form>
    }</Map> }</Context>
    

    Notes:

    • requireText is a validation filter function
    • doSomeAction receives a promise of the validated input data

    To Do

    • brief example
    • sort out ES6 compilation
    • test on Babel

    Install

    npm i react-collectable

    DownloadsWeekly Downloads

    3

    Version

    0.6.0

    License

    ISC

    Unpacked Size

    14.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • unframework