fenextjs-hook

fenextjs-hook

Hook of Fenextjs

• Documentation
• useData
• useRequest
• useModal
• useNotification
• useQuery
• useUser
• usePhone
• useCSC

Documentation

https://fenextjs-hook-doc.vercel.app/

useData

Hook for handling Data Object

//for CJS
import { useData } from "fenextjs-hook/cjs/useData";
//for ESM
import { useData } from "fenextjs-hook/esm/useData";

//interface of value
interface ValueProps {
    //....
}
//interface of value Memo(optional)
interface ValueMemoProps {
    //....
}
const {
    data, // value
    onChangeData, // change one value by key
    isChange, // boolean if change data
    setData, // set value
    dataMemo, // data parse by onMemo
    setIsChange, // set isChange
    onRestart, // set data with defaultValue
} = useData<
    ValueProps, // intefate of value
    ValueMemoProps //interface of value Memo(optional)
>(
    defaultValue, // default value
    {
        //function execute after change value
        onChangeDataAfter: (data: ValueProps) => {

        },
        //function execute for parse data to dataMemo
        onMemo: (data: ValueProps) => {
            const dataMemo : ValueMemoProps = {
                //...
            }
            return dataMemo
        };
    }
);

useRequest

Hook for request, loader and errors, with query and autoRequest

//for CJS
import { useRequest } from "fenextjs-hook/cjs/useRequest";
//for ESM
import { useRequest } from "fenextjs-hook/esm/useRequest";

//interface of query
interface QueryProps {
    //....
}
//interface of result
interface ResultProps {
    //....
}
//interface of error
interface ErrorProps {
    //....
}
//type of type result
type TypeProps = RequestResultTypeProps;
const {
    result, // result of request,
    loader, // boolean of loader,
    error, // error failing the request
    onRequest, // function request,
} = useRequest<
    QueryProps, // intefate of query
    ResultProps, //interface of result
    ErrorProps, //interface of error Request(optional)
    TypeProps //type of type result Request(optional)(default RequestResultTypeProps)
>({
    query, // query by use in request
    request, // function request
    autoRequest, // boolean if auto execute request is change query (optional)(default = false)
});

useModal

Hook to save modal settings to localstorage using uselocalstoragenextjs

//for CJS
import { useModal } from "fenextjs-hook/cjs/useModal";
//for ESM
import { useModal } from "fenextjs-hook/esm/useModal";

//inteface of content valueModal
interface useModalConfigContentProps {
    key: string; // key of config modal
    data: any; // config modal
}
//inteface of valueModal
interface useModalConfigProps {
    active?: boolean; // if active modal
    use?: boolean; // if use modal in current page
    loader?: boolean; // if loader modal
    content?: useModalConfigContentProps[]; // content config modal
}

const {
    valueModal, // value of config modal, inteface useModalConfigProps
    loadModal, // boolean if load modal
    updateModal, // update one value of config modal by key
    setModal, // set value of config modal, inteface useModalConfigProps
} = useModal();

useNotification

Hook to save notification settings to localstorage using uselocalstoragenextjs

//for CJS
import { useNotification } from "fenextjs-hook/cjs/useNotification";
//for ESM
import { useNotification } from "fenextjs-hook/esm/useNotification";

//type of notification
type NotificationType = "none" | "normal" | "ok" | "error" | "warning";

//iterfate of notification
interface NotificationProps {
    type?: NotificationType;
    message: string;
}
const {
    loadNotification, // boolean if load notification,
    notification, // value of notification, interface NotificationProps
    pop, // function of add notification by time
    reset, // reset notification (remove)
} = useNotification({
    time: 2000, // time of show notification (optional)(default = 2000)
});

useQuery

Hook for handling Query Router

//for CJS
import { useQuery } from "fenextjs-hook/cjs/useQuery";
//for ESM
import { useQuery } from "fenextjs-hook/esm/useQuery";

const {
    query, // query value, interface useQuery_QueryProps
    setQuery, // set query value
    onChangeQuery, // change one query value by key
    isChange, // boolean if change query
} = useQuery();

useUser

Hook for handling User Auth

//for CJS
import { useUser } from "fenextjs-hook/cjs/useUser";
//for ESM
import { useUser } from "fenextjs-hook/esm/useUser";

const {
    load, // boolean if load
    user, // user value, interface UserProps | null
    setUser, // set user value
    onLogin, // set user if login and validateToken
    onLogOut, //set user in null
} = useUser({
    // function for validate token (optiona)
    // this example is default
    validateTokenUser = async (user: UserProps) => {
        if (!user.token) {
            throw {
                type: RequestResultTypeProps.ERROR,
                message: "User not Token",
                error: {
                    code: ErrorCode.USER_TOKEN_NOT_FOUNT,
                    message: "User not Token",
                },
            } as RequestResultDataProps;
        }
        try {
            const token: UserProps = jwt_decode(user.token);
            if (token?.id) {
                return {
                    type: RequestResultTypeProps.OK,
                    message: "User Validate Ok",
                } as RequestResultDataProps;
            }
            throw {
                type: RequestResultTypeProps.ERROR,
                message: "Token Invalid",
                error: {
                    code: ErrorCode.USER_TOKEN_INVALID,
                    message: "Token Invalid",
                },
            } as RequestResultDataProps;
        } catch (error) {
            throw {
                type: RequestResultTypeProps.ERROR,
                message: "Token Invalid",
                error: {
                    code: ErrorCode.USER_TOKEN_INVALID,
                    message: "Token Invalid",
                },
            } as RequestResultDataProps;
        }
    },
});

usePhone

Hook for handling Phone with code and number, useing world-phones

//for CJS
import { usePhone } from "fenextjs-hook/cjs/usePhone";
//for ESM
import { usePhone } from "fenextjs-hook/esm/usePhone";

const {
    load, // boolean if load list code
    codes, // list of code phone, interface PhoneCodeProps
    phone, // phone selected, interface PhoneProps
    setCode, // set code of phone
    setNumber, // set number of phone
} = usePhone({
    //default value of phone, (optional), interface PhoneProps
    defaultValue: {
        code: "",
        number: "",
    },
});

useCSC

Hook for handling Country/State/City, useing country-state-city-nextjs

//for CJS
import { useCSC } from "fenextjs-hook/cjs/useCSC";
//for ESM
import { useCSC } from "fenextjs-hook/esm/useCSC";

const {
    load, //is load all countrys, states and citys
    countrys, //all countrys
    states, //all states
    citys, //all citys
    value, // value of contry, state and city, of selected, interface CSCProps
    onChangeCSC, //object of functions for change selected country, state and city
    statesForCountrySelected, // all states of countrySelected
    citysForStateSelected, // all citys of stateSelected
} = useCSC({
    //(Optional)
    defaultValue: {
        //(Optional)
        country: {
            id: 82,
            text: "Colombia",
        },
        //(Optional)
        state: {
            id: 1700,
            id_country: 82,
            text: "Antioquia",
        },
        //(Optional)
        city: {
            id: 465167,
            id_state: 1700,
            text: "Medellín",
        },
    },
});

Developer

Francisco Blanco

Gitlab franciscoblancojn

Email [e-mail]

Repositories

• Gitlab