useFeedback

A Custom REACT Hook for sending Feedbacks such as 'Error', 'Success', 'Warning' and 'Info' to the User

Installation

Use the package manager npm to install useFeedback.

npm install use-feedback

Usage

import { useFeedback } from 'useFeedback'

export default App = () => {
  const { setFeed, display, clear, value } = useFeedback()

  const [username, setUsername] = React.useState('')

  const handleFetch = async () => {
    try {
      const res = await fetch('/user/[email protected]')
      setUsername(res.data.username)
      setFeed('Successfull!', 'success', 3000)
    } catch (err) {
      setFeed(err.message, 'error', 5000)
    }
  }

  return (
    <div>
      {display} {/* You just add display variable to the JSX and that's it */}
      <h1>{username}</h1>
      <button onClick={handleFetch}>Fetch</button>
    </div>
  )
}

useFeedback Hook

const {
  setFeed, // Function that sets the Feedbacks
  display, // Displays the Feedback on the Screen
  clear, // Clears the Feedback
  value, // Shows the value of the Feedback
  type // Shows the type of Feedback (error, success, etc...)
} = useFeedback()

setFeed Method

    type allowedTypes = 'error' | 'success' | 'warning' | 'info'
    interface OPTIONS {
        height: string, // '5rem', '2px', '10vh' etc...
        width: string, // '5rem', '2px', '100%' etc...
        shadow: number, // 0, 1, 2, 3
        radius: number, // 0, 1, 2, 3, 4, 5
        color: string,
        background: string,
        y: string, // '5rem', '2px', '100%' etc...
        scale: number, // 0, 1, 2 etc...
        opacity: number, // 0, 1, 2 etc...
    }

    setFeed(value: string, type: allowedTypes, timeout: number, options: OPTIONS)

• value - Feedback Message that you want to display => required
• type - One of the Feedback types => default: 'error'
• timeout - Time that Feedback Message stays on the screen => default: 3000 (3 seconds)
• options - Styling options for Feedback Message Component

Must Have Dependencies

• react
• react-dom
• react-icons
• react-router-dom
• styled-components
• framer-motion