https://github.com/jonnathan23/control-gastos
Práctica de React elaboración de una página de control de gastos
https://github.com/jonnathan23/control-gastos
context-api react use-reducer
Last synced: 22 days ago
JSON representation
Práctica de React elaboración de una página de control de gastos
- Host: GitHub
- URL: https://github.com/jonnathan23/control-gastos
- Owner: Jonnathan23
- Created: 2024-11-19T04:31:29.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-25T01:39:27.000Z (5 months ago)
- Last Synced: 2025-02-13T06:43:27.873Z (2 months ago)
- Topics: context-api, react, use-reducer
- Language: TypeScript
- Homepage: https://control-gastos-react-js.netlify.app/
- Size: 224 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Control Gastos
## Comando de depencias utilizadas
### Calendario
```bash
npm i react-date-picker
```
Dependencia extra para el calendario
```bash
npm install react-calendar
```
```ts
import 'react-calendar/dist/Calendar.css';
import DatePicker from 'react-date-picker';
import 'react-date-picker/dist/DatePicker.css';
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];
```
### react-swipeable-list
Efecto de boton deslizante
```bash
npm i react-swipeable-list
```
En caso de error de
instalar pop-types
```bash
npm install prop-types
```
Importar
```ts
import {
LeadingActions,
SwipeableList,
SwipeableListItem,
SwipeAction,
TrailingActions
} from 'react-swipeable-list';
// Estilos css
import 'react-swipeable-list/dist/styles.css';
```
Ejemplo de uso
```ts
/**
* Acciones que se mostraran al principio del item (swipe izquierda)
* En este caso, solo se muestra una acci n para actualizar el gasto
* @returns {JSX.Element}
*/
const leadeingActions = () => (
{ }}
>
Actualizar
)
/**
* Acciones que se mostraran al final del item (swipe derecha)
* En este caso, solo se muestra una acción para eliminar el gasto
* @returns {JSX.Element}
*/
const trailingActions = () => (
{ }}
>
Eliminar
)
```