hts-react-form

A simple and easy form for your react project.

Installation

npm install hts-react-form
yarn add hts-react-form

Usage

import React, { useState } from 'react'
import 'hts-react-form/styles/default.css'
import { HTSReactForm } from 'hts-react-form'

function HtsFormExample() {
  const [email, setEmail] = useState(null)
  const [password, setPassword] = useState(null)

  const loginHandler = (e) => {
    e.preventDefault()
  }

  return (
    <HTSReactForm
      controls={[
        {
          label: 'Email',
          type: 'text',
          name: 'email',
          value: email,
          onChange: (e) => setEmail(e.target.value),
          required: true,
        },
        {
          label: 'Password',
          type: 'password',
          name: 'password',
          value: password,
          onChange: (e) => setPassword(e.target.value),
          required: true,
        },
      ]}
      actionControl={{
        label: 'Login',
        onSubmit: loginHandler,
        className: `${btnStyles.button} ${btnStyles.primary}`,
      }}
      forgetPassword={{
        label: 'Forgot Password?',
        onClick: () => {},
      }}
      googleLogin={{
        label: <i className='la la-google-plus'></i>,
        onClick: () => {},
      }}
      facebookLogin={{
        label: <i className='lab la-facebook'></i>,
        onClick: () => {},
      }}
      githubLogin={{
        label: <i className='la la-github'></i>,
        onClick: () => {},
      }}
    />
  )
}

export default HtsFormExample

Preview

image

Attributes

Key Value
controls

Array of input control each contains these properties

{
  "label": "string or JSX.Element"
  "name" :"string"
  "type" :"string"
  "placeholder" :"string (optional)"
  "value" :"any"
  "onChange" :"function"
  "styles" :"React.CSSProperties (optional)"
  "className" :"string (optional)"
  "required" :"boolean (optional) default false"
  "validation" :{ "pattern" : "RegExp", "message": "string" } "(optional)"
  "options": {
    "label": "string"
    "value": "string"
  } "(optional)"
}
actionControl

action control otpions

{
  "label": "string or JSX.Element"
  "onSubmit": "function"
  "styles": "React.CSSProperties (optional)"
  "className": "string"
}
forgetPassword

option for showing forgot password button

{
  "label": "string or JSX.Element"
  "onClick": "function"
  "styles": "React.CSSProperties (optional)"
  "className": "string"
}
googleLogin

option for showing googleLogin button

{
  "label": "string or JSX.Element"
  "onClick": "function"
  "styles": "React.CSSProperties (optional)"
  "className": "string"
}
githubLogin

option for showing githubLogin button

{
  "label": "string or JSX.Element"
  "onClick": "function"
  "styles": "React.CSSProperties (optional)"
  "className": "string"
}
facebookLogin

option for showing facebookLogin button

{
  "label": "string or JSX.Element"
  "onClick": "function"
  "styles": "React.CSSProperties (optional)"
  "className": "string"
}
labelClassName Custom class name for label style.
labelStyles Custom style object to override label styles
className Custom class name for form container style.
styles Custom style object to override form container styles
errorClassName Custom class name for form error box style.
errorStyles Custom style object to override form error box styles

Todos

Firebse auth option for all social logins

License

MIT

GitHub

View Github