@edinelsonslima/toast-notification 0.0.22 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +82 -20
  2. package/package.json +4 -28
package/README.md CHANGED
@@ -1,30 +1,92 @@
1
- # React + TypeScript + Vite
1
+ # Toast Notifications
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ ## ⤵️ Instalando
4
4
 
5
- Currently, two official plugins are available:
5
+ ```
6
+ yarn add @edinelsonslima/toast-notification
7
+ ```
8
+ ```
9
+ npm install @edinelsonslima/toast-notification
10
+ ```
6
11
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
12
+ ## 👨🏻‍💻 Modo de usar
13
+ - Adicione o componente `<ToastContainer/>` em algum lugar da sua aplicação;
14
+ - Importe os estilos css de `import '@edinelsonslima/toast-notification/dist/style.css'`;
9
15
 
10
- ## Expanding the ESLint configuration
16
+ ```tsx
17
+ import { ToastContainer } from '@edinelsonslima/toast-notification';
18
+ import '@edinelsonslima/toast-notification/dist/style.css';
11
19
 
12
- If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
20
+ export default function App(){
21
+ //seu código
22
+
23
+ return (
24
+ <>
25
+ <ToastContainer />
26
+ </>
27
+ )
28
+ }
29
+ ```
13
30
 
14
- - Configure the top-level `parserOptions` property like this:
31
+ - Disparando os toast com a função `toast` de dentro do `@edinelsonslima/toast-notification`
15
32
 
16
- ```js
17
- export default {
18
- // other rules...
19
- parserOptions: {
20
- ecmaVersion: 'latest',
21
- sourceType: 'module',
22
- project: ['./tsconfig.json', './tsconfig.node.json'],
23
- tsconfigRootDir: __dirname,
24
- },
33
+ ```tsx
34
+ import { toast } from '@edinelsonslima/toast-notification';
35
+
36
+ export default function MyComponent(){
37
+ //seu código
38
+
39
+ const examapleToast = () => {
40
+ toast.success({ text: "Mensagem de exemplo" })
41
+ }
42
+
43
+ return (
44
+ //seu código
45
+ )
25
46
  }
26
47
  ```
27
48
 
28
- - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29
- - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30
- - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
49
+ ## 🧐 Informações adicionais
50
+
51
+ | função | propriedades |
52
+ |--------------------|------------------------------------------------------------|
53
+ | ToastContainer | `classNames` `position` |
54
+ | toast | `text` `type` `duration` |
55
+
56
+ | | toast |
57
+ |--------------------|----------------------------------------------------------- |
58
+ | text | A mensagem que aparecerá dentro do toast |
59
+ | type | Define o tipo de toast que é para aparecer |
60
+ | duration | O tempo que o toast irá permanecer em tela |
61
+
62
+ | | ToastContainer |
63
+ |--------------------|----------------------------------------------------------- |
64
+ | classNames | Um objeto de **chave:valor** onde a chave é o tipo de toast e o valor pode ser uma string (classNames) ou um objeto (CSSProperties) |
65
+ | position | Define em qual parte da tela irá aparecer a toast notification, existe valores predefinidos |
66
+
67
+
68
+
69
+ | propriedade |tipo | é obrigatório | padrão |
70
+ |-------------|-------|-----------------|-------------|
71
+ | text |string | sim | - |
72
+ | type |string | sim | - |
73
+ | duration |number | não | 7_0000 |
74
+ | classNames |object | não | undefined |
75
+ | position |string | não | right-top |
76
+
77
+ ℹ️ O `durantion` está em ms (milissegundos)
78
+
79
+
80
+ ℹ️ A função `toast` pode ser chamada de duas forma, veja os exemplos a seguir:
81
+
82
+ caso seja chamada direta, será obrigatório informa o **type**
83
+ ```ts
84
+ toast({ text: "mensagem exemplo", type: "info", durantion: 1000 * 4 })
85
+ ```
86
+ ou pode acessar o tipo do toast diretamente, assim omitindo ele do objeto enviado
87
+ ```ts
88
+ toast.info({ text: "mensagem exemplo", durantion: 1000 * 4 })
89
+ ```
90
+
91
+
92
+
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@edinelsonslima/toast-notification",
3
- "version": "0.0.22",
3
+ "version": "0.0.24",
4
4
  "author": "@edinelsonslima",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "git+https://github.com/edinelsonslima/@edinelsonslima/toast-notification.git"
9
+ "url": "git+https://github.com/edinelsonslima/toast-notification.git"
10
10
  },
11
11
  "bugs": {
12
- "url": "https://github.com/edinelsonslima/@edinelsonslima/toast-notification/issues"
12
+ "url": "https://github.com/edinelsonslima/toast-notification/issues"
13
13
  },
14
- "homepage": "https://github.com/edinelsonslima/@edinelsonslima/toast-notification#readme",
14
+ "homepage": "https://github.com/edinelsonslima/toast-notification#readme",
15
15
  "main": "dist/toast-notification.umd.js",
16
16
  "module": "dist/toast-notification.es.js",
17
17
  "types": "dist/index.d.ts",
@@ -31,29 +31,5 @@
31
31
  ],
32
32
  "publishConfig": {
33
33
  "access": "public"
34
- },
35
- "scripts": {
36
- "dev": "vite",
37
- "build": "tsc && vite build",
38
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
39
- "preview": "vite preview"
40
- },
41
- "dependencies": {
42
- "react": "^18.2.0",
43
- "react-dom": "^18.2.0"
44
- },
45
- "devDependencies": {
46
- "@types/react": "^18.2.37",
47
- "@types/react-dom": "^18.2.15",
48
- "@typescript-eslint/eslint-plugin": "^6.10.0",
49
- "@typescript-eslint/parser": "^6.10.0",
50
- "@vitejs/plugin-react-swc": "^3.5.0",
51
- "eslint": "^8.53.0",
52
- "eslint-plugin-react-hooks": "^4.6.0",
53
- "eslint-plugin-react-refresh": "^0.4.4",
54
- "path": "^0.12.7",
55
- "typescript": "^5.2.2",
56
- "vite": "^5.0.0",
57
- "vite-plugin-dts": "^3.6.4"
58
34
  }
59
35
  }