UI Helper Modules

Made with create-react-library

Install

npm install --save @home-loan-experts/ui-helper

Usage

import React, { Component } from 'react'

import { FormikControl, Form, Formik } from '@home-loan-experts/ui-helper'

class Example extends Component {
    render() {
        return (
            <Formik>
                {({ values }) => {
                    return (
                        <Form>
                            <FormikControl
                                control='select'
                                label='Any State'
                                name='state'
                            />
                            <FormikControl
                                control='numeric'
                                label='Property Value'
                                name='property_value'
                                placeholder='Enter property value'
                            />
                            <FormikControl
                                control='radio'
                                label='Property Type'
                                name='property_type'
                            />
                            <FormikControl
                                control='numeric'
                                label='Loan Amount'
                                name='loan_amount'
                                prefix={'रु'}
                            />
                            <FormikControl
                                control='numeric'
                                label='Loan Term'
                                name='loan_term'
                                prefix={''}
                                suffix={
                                    <span class="placeholder-label">years</span>
                                }
                            />
                            
                        </Form>
                    )
                }}
            </Formik>
        )
    }
}
// Note: For Prefixing numeric, use prefix (default is $ as it is used in many places already), for suffix: prefix should be prefix={''} and suffix as span class with required suffix value like years, %, etc.
// For thousandSeparator, default is true and isThousandSeparator is used for settting to false or true.
// For decimalScale, default is false which means decimal is allowed to any point. If set to 0, floating point number is not allowed. If set to any number, it limits point to that number
// For allowNegative, default is set to false. If set to true, negative numbers will be allowed to enter.

// Loader Implementation
import { Loader } from '@home-loan-experts/ui-helper'

// Loader Implement
<Loader isLoading={true} />

// EnquireOnlineButton Implementation
import { EnquireOnlineButton } from '@home-loan-experts/ui-helper'

// EnquireOnlineButton Implement
<EnquireOnlineButton />

// Disclaimer Implementation
import { Disclaimer } from '@home-loan-experts/ui-helper'

// Disclaimer Implement
<Disclaimer disclaimerText='test' />

References:

• https://github.com/transitive-bullshit/create-react-library
• https://soshace.com/how-to-careate-a-react-ccomponent-library-using-a-modal-example/

License

MIT © HomeLoanExperts