JSPM

@fazin/loader-button

0.0.4
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 1
    • Score
      100M100P100Q30792F

    Package Exports

    • @fazin/loader-button

    Readme

    React Loader Button

    A simple loader button that can be used as a loading button and regular button with some additional capabilities and all native button functionalities.

    Installation

    Install using NPM or YARN

    npm install @fazin/loader-button

    Or

    yarn add @fazin/loader-button

    Props

    Name Usage Value Type
    label Required string
    loading Optional boolean
    loadingSpinnerPos Optional 'left' or 'right'
    altText Optional string
    keepText Optional boolean
    spinnerStyle Optional React.CSSProperties
    spinnerClassName Optional string
    icon Optional HTMLElement or React.ReactNode
    iconPos Optional 'left' or 'right' 
    import {LoaderButton} from '@fazin/loader-button'
function App() {
    const loadingState = true;
  return (
    <div>
    //Simple Button
     <LoaderButton  
        label='Click Me' 
        onClick={()=>console.log('clicked')}
    />
    //loading button 
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
    />
    //loadingSpinnerPos - will change the position of loader to either left or right
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        loadingSpinnerPos={'left'}
    />
    //altText - alternate text => display some other text while loading
     <LoaderButton  
        label='Click Me' 
        loading={loadingState}
        altText={'wait while loading...'} 
        onClick={()=>console.log('clicked')}
    />
    //keepText - keep text with spinner
     <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        keepText
    />
    //spinnerStyle - style spinner with css
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        spinnerStyle={{borderTop: 'blue'}}
    />
    //spinnerClassName - style spinner with css
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        spinnerClassName={'my-class-name'}
    />
    //icon - JSX or HTML 
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        icon={<i className='fa fa-mouse' ></i>}
    />
    //iconPos -  will change the position of icon to either left or right
    <LoaderButton  
        label='Click Me' 
        loading={loadingState} 
        icon={<i className='fa fa-mouse' ></i>}
        iconPos={'right'}
    />
    </div>
  );
}

    Thanks