National Preventative Mechanism

    zp-ui-effect

    1.0.10 • Public • Published

    ZP-UI Effect

    Build Status

    ZaloPay UI Effect is a common's Reat components library to serve some features like: Loading, show Toast, etc,....

    Repositories:

    Private repository is located at the Webapps project

    Tech

    ZP Ui Effect uses a number of open source projects to work properly:

    • Webpack - use to run a development server as a local styleguild
    • Styleguidist - Isolated React component development environment with a living style guide
    • React - Main library technology
    • Sass/Css - Stylesheet language
    • PostCss - a tool for transforming css with javascript
    • Rollup - a module bundler to build library's distrubuted files
    • Babel - Javascript converter for running script on old browsers ....

    Installation

    Install the dependencies and devDependencies and start the server.

    $ npm install --save zp-ui-effect

    or

    $ yarn add zp-ui-effect

    Components

    1. ZPLoading:

    A Loading component with ZaloPay Logo inside

    Props Type Description InitialValue
    className string React className for container div ''
    onClick function function that will be triggered on click loading component ()=>{}

    Example: You will want to change your isLoading variable to show or hide ZPLoading component.

    import {ZPLoading} from 'zp-ui-effect';
    ...
    {isLoading &&  (<ZPLoading />)}

    2. MessageToast:

    A Message Toast with Check icon uppon by default

    Props Type Description InitialValue
    toggle bool a trigger variable to show toast, when it true, set it false and reverse false
    message string content of displayed message on toast ''
    icon any Upper icon of toast, by default it is a Check icon <span className="check-icon"/>
    duration number duration while a toast show (miliseconds) 2000
    onShow function a callback function when a toast show ()=>{}
    onHide function a callback function when a toast hide ()=>{}
    onVisibleChange function a callback function when a toast hide or show ()=>{}

    Example: Call showToast function to trigger show the MessageToast

    import {MessageToast} from 'zp-ui-effect';
    ...
    const [toggle, setToggle]=useState(false);
     
    function showToast() {
        setToggle(prev=> !prev);
    }
    ...
    <MessageToast message="Le Hoang Nam" toggle={toggle}/>

    3. Spinner:

    Three bouncing dots

    Props Type Description InitialValue
    className string style for container of three animating dots ''

    Example: Call showToast function to trigger show the MessageToast

    import {Spinner} from 'zp-ui-effect'; 
    <Spinner/>

    2. BottomModal:

    A Modal that have animation sliding up from bottom

    Props Type Description InitialValue
    children any content of the modals null
    className string className of Content 's container ''
    isOpen bool a variable rules modal'state is open or not false
    duration number duration while a toast show (miliseconds) 2000
    onOpen function a callback function when a modal open ()=>{}
    onClose function a callback function when a modal 's backdrop ()=>{}
    ...otherProps props other props that pass again to content's container ()=>{}

    Example: Call showToast function to trigger show the MessageToast

    import {BottomModal} from 'zp-ui-effect';
    ...
    const [open,setOpen]=useState(false);
     
    <button onClick={()=> setState({isOpen:true})}>Click here to open Modal</button>
    <BottomModal  isOpen={state.isOpen}
                  onClose={()=>setOpen(false)}
                  style={{backgroundColor:'yellow'}}>
            <button onClick={()=> setOpen(false)}>Close Modal</button>
            <p>This is a bottom modal</p> 
    </BottomModal>

    Usage with Redux and other middlewares

    Add to reducer

    import {ZPEffectReducer} from 'zp-ui-effect'
     
    combineReducers({
         ...other reducer,
         uiEffectReducer: ZPEffectReducer, 
       });

    ** Add Components to Views **

    import {ZPLoading, MessageToast, BottomModal,openModal} from 'zp-ui-effect'
    const { isLoading, toast, isOpenModal } = useSelector(state => state.uiEffectReducer);
     
    <BottomModal isOpen={isOpenModal} handlClose={()=>dispatch(openModal())}>
        <SomeContent/>
    </BottomModal>
    <MessageToast {...toast} /> 
    {isLoading && <ZPLoading />}

    *** Usage ***

    import {showLoading, hideLoading, triggerToastWithMessage} from "zp-ui-effect"; 
    ...
    dispatch(showLoading()); 
    dispatch(hideLoading());
    dispatch(triggerToastWithMessage("Toast here"));

    Usage with Saga

    yield put(showLoading())
    yield put(triggerToastWithMessage("Toast from Saga"))

    Development

    • Config build script at rollup.config.js
    • Config styleguide server as styleguide.config.js
    • Build files located at ./build To show styleguide, run:
    $ yarn start

    To build files, run:

    $ yarn prePublishOnly

    To publish project, run:

    $ yarn publish

    Todos

    • Create more components

    License

    MIT

    Free Software, Hell Yeah!

    Keywords

    none

    Install

    npm i zp-ui-effect

    DownloadsWeekly Downloads

    0

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    119 kB

    Total Files

    10

    Last publish

    Collaborators

    • lehoangnam97