/ONG-SomosMas

Primary LanguageHTML

Ong Client

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template.

how to run this application

*Download or clone this repository in your computer. *Open your Terminal. *Write the following Available Scripts.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Setup Alert

The SetupAlert.js file export a "sweetAlert" function .

¿how to use?

when you need to offer feedback to the user. You can call the sweetAlert function passing it the following parameters:

sweetAlert("success")

sweetAlert("error")

sweetAlert("info", text)

Setup Spinner

The SetupSpinner.js file provides a custom "useSpinner" Hook.

const spinner = useSpinner()

this customHook return an object with the next properties:

  • state: inicialized in false .
  • set: change the state to true
  • remove: change the state to false
  • loader: show the spinner

¿how to use?

  • before starting an http request use the "set" method
  • after it returns the data. use the "remove" method
  • when dynamically displaying the data extracted from a web service. we must return the following: return ({ (spinner.state)? spinner.loader : data.map (callback) })

Skeleton component

import Skeleton from "src/components/Skeleton"

Props:

  • variant ( "rectangle" | "circle" | "text" ):
    • rectangle: render a rectangle
    • circle: render a perfect circle
    • text: simulate text
  • width (number): Must be a number and it will be a measure in pixels, except for "text" where it will be a percentage % measure. If width is missing Skeleton will render with 100% width of it's parent element.
  • height (number): Must be a number and it will be a measure in pixels. If height is missing Skeleton will render with 100% height of it's parent element.
  • animation ("none"): Default animation is pulse but you can deactivate it passing "none" to animation prop.
  • className (string): Any className you want to pass to Skeleton element.

Setup Progress

This component receives a boolean type prop called "progressStatus", if it does not receive it, by default it will show the component.

Options for progressStatus:
 - true: It will show the component
 - false: It hide the component

Example: You can use a useState: const [statusProgress, setStatusProgress] = useState(false);

  • setStatusProgress(true) --> It will show the component
  • setStatusProgress(false) --> It hide the component

<SetupProgress progressStatus={TypeBoolean} />