asireact-formcomponents

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

AutoComplete

Input text field that gives autocomplete options based on array of keywords

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

FileUpload

Component to handle file uploads complete with dropzone and file browser dialog. Supports multiple files and file preview. Currently only holds file icons for [PDF, XPS].

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