Asitis React Formcomponent

Installation

Execute one of the following commands in powershell

  # Yarn users
  yarn global add asireact-formcomponents

  # NPM users
  npm install --save asireact-formcomponents

Usage

To import specific or multiple components from this library use the following:

  import { AutoComplete, FileUpload } from 'asireact-formcomponents'

Components

Props / parameters

| Prop | Type | Required | Description | Default value | |:-----------|:--------:|:---------|:------------------------------------------------------------|:----------------------------| | onChange | function | NO | Callback from input & selection | | | onSelect | function | NO | Callback from selection | | | keywords | array : string | YES | Keywords from which the autocomplete will match the input to | | | name | string | NO | Name / identifier of input field | | | label | string | NO | Optionable label for input | | | error | string | NO | Optionable error message for label (requires label for effect) | | | debug | bool | NO | Adds pre-tag with debug info | false | | multi | bool | NO | Allows multiple word completion | false | | value | string | NO | Control value from parent component | | style | object | NO | Style object to customize component | | | className | string | NO | Adds class to component.. hio hio | |

Example

import React, { Component } from 'react'
import { AutoComplete } from 'asireact-formcomponents'

class Example extends Component {

  handleAutoComplete(value, name){
    console.log(`AutoComplete ${name} returned text: ${value}`)
  }

  render() {
    const { multi, debug } = this.state
    return (
        <AutoComplete style={{marginTop: 50}} name='example' onChange={this.handleAutoComplete} />
    )
  }
}

export default Example

Props / parameters

| Prop | Type | Required | Description | Default value | |:-----------|:--------:|:---------|:------------------------------------------------------------|:----------------------------| | return | function | YES | Function to handle dropped files | | | accept | string | NO | Accepted filetypes e.x. '.pdf, .xps' | | | dragText | string | NO | Large header text | 'DRAG FILES HERE' | | selectText | string | NO | Informative text that user can choose to open file browser | 'select from your computer' | | dragText | string | NO | Text inbetween header and informative text | 'or' | | style | object | NO | Style object to customize component | | | className | string | NO | Adds class to component.. hio hio | |

Example

import React, { Component } from 'react'
import { FileUpload } from 'asireact-formcomponents'

class Example extends Component {

  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleFiles = this.handleFiles.bind(this)
  }

  handleSubmit(e) {
    if (this.state.files.length > 0) {

      // Create formdata and append files
      var fd = new FormData()
      this.state.files.forEach(function (file) {
        fd.append('files[]', file, file.name)
      })

      // Upload files to server
      axios.post('/upload', fd)
        .then(res => this.props.createAlert('success', res.data))
        .catch(err => this.props.createAlert('error', err.message))

      // Reset state  
      this.setState({ files: [] })
    }
  }

  // Function passed to component to receive dropped files
  handleFiles(files){
    this.setState({files})
  }

  render() {
    return (
      <div>
        <FileUpload return={this.handleFiles}/>
        <input type='submit' value='submit' onClick={this.handleSubmit} />
      </div>
    )
  }
}

export default Example