my-animated-components 1.0.8 → 1.0.9

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/package.json +1 -1
  2. package/readme.md +56 -87
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "my-animated-components",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/readme.md CHANGED
@@ -1,56 +1,67 @@
1
- # MY Animated Components
1
+ # My Animated Components
2
2
 
3
- **My Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons and icon buttons with different styles, sizes, and interactive animations.
3
+ **My Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons, icon buttons, and other interactive UI elements with different styles, sizes, and animations.
4
4
 
5
5
  ---
6
6
 
7
7
  ## Features
8
8
 
9
- Animated Components
10
- Animated Components is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons, icon buttons, and other interactive UI elements with different styles, sizes, and animations.
11
-
12
- Features
13
- Customizable Buttons: Supports different variants (solid, outline, ghost) and colors (primary, secondary, etc.).
14
- Icon Button: Use any custom icon inside the button for more flexibility.
15
- Framer Motion Animations: Interactive hover and tap animations to enhance user experience.
16
- Various UI Elements: Includes components like Accordion, Alert, Badge, Modal, Dropdown, and more.
17
- Available Components
18
- Button
19
- IconButton
20
- Accordion
21
- Alert
22
- Avatar
23
- Badge
24
- Breadcrumb
25
- Card
26
- Dropdown
27
- Checkbox
28
- FileUpload
29
- Input
30
- Radio
31
- Select
32
- Switch
33
- Textarea
34
- Modal
35
- Navbar
36
- Pagination
37
- ProgressBar
38
- Slider
39
- Table
40
- Tabs
41
- Tooltip
42
- Heading
43
- Text
44
-
45
- ## props
46
- onClick (function): The function to call when the button is clicked.
47
- disabled (boolean): Disables the button.
48
- variant (string): The button style, one of solid, outline, or ghost.
49
- color (string): The button color, one of primary, secondary, success, danger, warning, or info.
50
- size (string): The size of the button, one of xs, sm, md, lg, or xl.
51
- motionVariant (string): A predefined motion animation for the button (fadeIn is the default).
9
+ - **Customizable Buttons**: Supports different variants (solid, outline, ghost) and colors (primary, secondary, etc.).
10
+ - **Icon Button**: Use any custom icon inside the button for more flexibility.
11
+ - **Framer Motion Animations**: Interactive hover and tap animations to enhance user experience.
12
+ - **Various UI Elements**: Includes components like Accordion, Alert, Badge, Modal, Dropdown, and more.
13
+
14
+ ## Available Components
15
+
16
+ - Button
17
+ - IconButton
18
+ - Accordion
19
+ - Alert
20
+ - Avatar
21
+ - Badge
22
+ - Breadcrumb
23
+ - Card
24
+ - Dropdown
25
+ - Checkbox
26
+ - FileUpload
27
+ - Input
28
+ - Radio
29
+ - Select
30
+ - Switch
31
+ - Textarea
32
+ - Modal
33
+ - Navbar
34
+ - Pagination
35
+ - ProgressBar
36
+ - Slider
37
+ - Table
38
+ - Tabs
39
+ - Tooltip
40
+ - Heading
41
+ - Text
42
+
43
+ ---
44
+
45
+ ## Props
46
+
47
+ Here are the common props for the **Button** component:
48
+
49
+ | Prop | Type | Description |
50
+ |---------------|-----------|---------------------------------------------------------------|
51
+ | `onClick` | function | The function to call when the button is clicked. |
52
+ | `disabled` | boolean | Disables the button if set to true. |
53
+ | `variant` | string | The button style, one of `solid`, `outline`, or `ghost`. |
54
+ | `color` | string | The button color, one of `primary`, `secondary`, `success`, `danger`, `warning`, or `info`. |
55
+ | `size` | string | The size of the button, one of `xs`, `sm`, `md`, `lg`, or `xl`. |
56
+ | `motionVariant` | string | A predefined motion animation for the button (default is `fadeIn`). |
57
+
58
+ ---
52
59
 
53
60
  ## Example Usage
61
+
62
+ ### Button Example
63
+
64
+ ```tsx
54
65
  import { Button } from 'my-animated-components';
55
66
 
56
67
  const MyComponent = () => {
@@ -61,45 +72,3 @@ const MyComponent = () => {
61
72
  );
62
73
  };
63
74
 
64
- ## other example
65
-
66
- import { IconButton } from 'my-animated-components';
67
- import { FaBeer } from 'react-icons/fa';
68
-
69
- const MyComponent = () => {
70
- return (
71
- <IconButton color="secondary" size="lg">
72
- <FaBeer />
73
- </IconButton>
74
- );
75
- };
76
-
77
-
78
-
79
- ## Installation
80
- To install my-animated-components in your React project, you also need to install Tailwind CSS and Framer Motion as dependencies. Run the following commands:
81
-
82
- Install my-animated-components:
83
- bash
84
- Copy code
85
- npm install my-animated-components
86
- Install Tailwind CSS (if not already installed in your project):
87
- bash
88
- Copy code
89
- npm install -D tailwindcss
90
- Install Framer Motion (for animations):
91
- bash
92
- Copy code
93
- npm install framer-motion
94
- Add Tailwind to your CSS file (e.g., src/index.css):
95
- css
96
- Copy code
97
- @tailwind base;
98
- @tailwind components;
99
- @tailwind utilities;
100
- Make sure to configure Tailwind in your tailwind.config.js file if it is not already set up:
101
- bash
102
- Copy code
103
- npx tailwindcss init
104
-
105
- npm install my-animated-components