https://github.com/pragonauts/prg-form

React Form Components For Bulma
https://github.com/pragonauts/prg-form

bulma bulma-css component-library form pragonauts react reactjs

Last synced: 29 days ago
JSON representation

React Form Components For Bulma

• Host: GitHub
• URL: https://github.com/pragonauts/prg-form
• Owner: pragonauts
• Created: 2017-02-09T10:22:08.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-07T11:14:42.000Z (almost 7 years ago)
• Last Synced: 2024-11-23T17:37:25.100Z (about 1 month ago)
• Topics: bulma, bulma-css, component-library, form, pragonauts, react, reactjs
• Language: JavaScript
• Size: 1.02 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Prg Form

> React Form components for Bulma.css.

There is [API Documentation](http://pragonauts.github.io/prg-form).

## Usage within Form

```javascript

import { Form, Input } from 'prg-form';

 console.log(values)}

    onChange={(input) => console.log(input.name, input.getValue())}

    values={values}

>

    

    Submit

```

## Usage without Form

- onchange event is not passed to form

```javascript

import { Input } from 'prg-form';

 {}}

/>

```

## Basic Form Components

- ****

    ```javascript

    import { Input } from 'prg-form';

    

    ```

- ****

    ```javascript

    import { Checkbox } from 'prg-form';

    

    ```

- ****

    ```javascript

    import { TextArea } from 'prg-form';

    

  ```

- ****

    Is nice, because it works with native `` objects.

    ```javascript

    import { File } from 'prg-form';

    // as array of files

    

    

    ```

## Advanced using the file upload

```javascript

import { File, ValidatorForm, flat } from 'prg-form';

import Validator from 'prg-validator';

export default function Component ({ onSendSuccess, onSendError }) {

    const validator = new Validator();

    validator.add('file')

        .isFileMaxLength('shlould be smaller then 1Mb', '1m')

        .isFileMime('Should be an excel file', [

            'application/vnd.ms-excel',

            'application/msexcel',

            'application/x-msexcel',

            'application/x-ms-excel',

            'application/x-excel',

            'application/x-dos_ms_excel',

            'application/xls',

            'application/x-xls',

            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

        ])

        .toFileData();

    const onSubmit = (formData) => {

        const data = new FormData();

        const flatData = flat(formData);

        Object.keys(flatData)

            .forEach((key) => {

                data.append(key, flatData[key]);

            });

        this.request = $.ajax({

            method: 'POST',

            url: '/api/upload',

            dataType: 'json',   // JSON Response

            processData: false, // Don't process the files

            contentType: false, // Automatic content type

            data,

            success: responseData => onSendSuccess(responseData),

            error: jqXHR => onSendError(jqXHR)

        });

    };

    return (


         onSubmit(data)}

        >

            

            Go

        

    
);

}


```