DEV Community: lineldcosta

React simple responsive menu hook

lineldcosta — Fri, 09 Apr 2021 11:51:11 +0000

Do you want to convert your menu to responsive? just wrap it with react-responsive-menu-hook!

It gives full control over the menu ui as well as the design of ellipsis

lineldcosta / react-responsive-menu-hook

Simple flexible hook to convert any menu links into responsive links.

react-responsive-menu-hook

Features

Headless
Responsive
Extensible

Installation

yarn add react-responsive-menu-hook
# or
npm i -s react-responsive-menu-hook

Basic Usage

import React from 'react'
import ReactResponsiveMenu from 'react-responsive-menu-hook'
function App() {
  return (
    <ReactResponsiveMenu>
      {({ getMenuProps, showEllipsis, children, open, toggle }) => {
        return (
          <React.Fragment>
            <div {...getMenuProps({ id: 'home', style })}>Home</div>
            <div {...getMenuProps({ id: 'contactUs', style })}>Contact Us</div>
            <div {...getMenuProps({ id: 'aboutUs', style })}>About Us</div>
            <div {...getMenuProps({ id: 'registration', style })}>Registration</div>
            <div {...getMenuProps(

…

View on GitHub

To install run

 npm install react-responsive-menu-hook

Demo

https://codesandbox.io/s/sharp-leavitt-w08wn?file=/src/index.js

Happy coding...! drop a comment if you have any issues!

Custom React hook form validation with yup & material ui

lineldcosta — Mon, 29 Jun 2020 11:06:47 +0000

Doing any freelancing? want to finish the task quickly? Just follow below, apply on any forms and finsh form validation quickly.

Create a reducer

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_VALUE':
      return {
        ...state,
        [FORMDATA]: action.payLoad,
      };
    case 'SET_ERROR':
      return {
        ...state,
        [ERRORS]: action.payLoad,
      };
    case 'ON_CHANGE':
      return {
        ...state,
        ...action.payLoad,
      };
    default:
      return state;
  }
};

Use the below custom hook


export const useForm = (schema, defaultFormValues = {}) => {
  const [state, dispatch] = useReducer(reducer, { [FORMDATA]: defaultFormValues, [ERRORS]: {} });
  const { formData, errors } = state;

  // Commit state result
  const dispatchValue = (field, value, result) => {
    if (result instanceof Yup.ValidationError) {
      // Error
      errors[field] = result.message;
    } else {
      // Delete current state result
      delete errors[field];
    }

    // Update state, for object update, need a clone
    const newState = { [ERRORS]: errors, [FORMDATA]: { ...formData, [field]: value } };
    dispatch({ type: 'ON_CHANGE', payLoad: newState });
  };

  const updateFormValue = (field, value) => {
    // Validate the field, then before catch, if catch before then, both will be triggered

    Yup.reach(schema(), field)
      .validate(value)
      .then((result) => {
        dispatchValue(field, value, result);
      })
      .catch((result) => {
        dispatchValue(field, value, result);
      });
  };

  return {
    validate: async () => {
      const validationResult = { isValid: true, errors: {} };
      try {
        await schema().validate(formData, {
          strict: true,
          abortEarly: false,
          stripUnknown: false,
        });
      } catch (e) {
        const formValidationError = {};
        if (e instanceof Yup.ValidationError) {
          // eslint-disable-next-line no-restricted-syntax
          for (const error of e.inner) {
            // Only show the first error of the field
            if (!formValidationError[error.path]) {
              formValidationError[error.path] = error.message;
            }
          }
        }
        dispatch({ type: 'SET_ERROR', payLoad: formValidationError });
        validationResult.isValid = false;
        validationResult.errors = formValidationError;
        return validationResult;
      }

      return validationResult;
    },
    setValue: (formInput) => {
      //  In case where we need to set all the form values
      if (Array.isArray(formInput)) {
        const [defaultObj] = formInput;
        dispatch({ type: 'SET_VALUE', payLoad: { ...formData, ...defaultObj } });
      } else {
        const { name, value } = formInput;
        updateFormValue(name, value);
      }
    },
    errors: (field) => errors[field],
    getValues: () => formData,
    value: (field) => state[field],
    onFormBlur: (name, value) => {
      updateFormValue(name, value);
    },
  };
};

To handle form value and validation just import the above hook.


  const { validate, setValue, errors, getValues } = useForm(validateSchema, formData);

You can use yup to define the schema

import * as yup from 'yup';

// eslint-disable-next-line import/prefer-default-export
export const validateSchema = () =>
  yup.object().shape({
    service: yup
      .number()
      .required('Please provide the service')
  });

To get the form values you can use the method exported from useFrom hook like below.

  const initialState = getValues();

If you are using material-ui then use like below.

  <TextField
    id={ROLE}
    name={ROLE}
    label="Role"
    placeholder=""
    maxLength="15"
    fullWidth
    required
    margin="dense"
    value={initialState[ROLE]}
    autoComplete="off"
    disabled={isLoading || isSubmiting || !initialState[SERVICE]}
    onChange={onChangeInput(ROLE)}
    error={!!errors(ROLE)}
    helperText={errors(ROLE)}
    InputLabelProps={{
      shrink: true,
      'aria-label': 'Select Role',
    }}
  />

If you have any suggetions add comments.... happy coding!!

Boilerplate for nodejs, typescript - simple folder structure

lineldcosta — Mon, 06 Jan 2020 11:27:58 +0000

This is a simple boilerplate application to start the project from scratch using typescript and nodejs.

If you are working on freelance projects and wanted to quickstart the project with all the initial setup having simple architechture, use this setup and finish requirement on time :-)

lineldcosta / typescript-node-rest-api-boilerplate

Node.js REST API boilerplate built with typescript, Node, Jest, pm2, express, postgresql, slonik

This is rest based nodejs boilerplate application, which uses router-services-model architecture.

Requirements

NodeJS

Install global TypeScript and TypeScript Node

npm install -g typescript ts-node

Clone this repository

git@github.com:lineldcosta/typescript-node-rest-api-boilerplate.git

Then install the dependencies

npm install

To Run the application in production mode

yarn start-prod

To Run the application in development mode

yarn start-dev

To Run the tests

Yarn jest