react-iro-gradient-picker 1.0.11 → 1.1.0
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.
- package/README.md +2 -29
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -63,7 +63,8 @@ pnpm add react-iro-gradient-picker
|
|
|
63
63
|
|
|
64
64
|
```tsx
|
|
65
65
|
import React, { useState } from 'react';
|
|
66
|
-
import ColorPicker from 'react-iro-gradient-picker';
|
|
66
|
+
import ColorPicker from 'react-iro-gradient-picker';
|
|
67
|
+
import 'react-iro-gradient-picker/dist/index.css'; // Import CSS styles
|
|
67
68
|
|
|
68
69
|
function App() {
|
|
69
70
|
const [color, setColor] = useState('#3B82F6');
|
|
@@ -83,34 +84,6 @@ function App() {
|
|
|
83
84
|
export default App;
|
|
84
85
|
```
|
|
85
86
|
|
|
86
|
-
> **Note:** CSS styles are automatically injected when you import the component. All styles are properly scoped to prevent conflicts with your application's existing styles.
|
|
87
|
-
|
|
88
|
-
### 🎯 CSS Scoping & Style Isolation
|
|
89
|
-
|
|
90
|
-
This package uses scoped CSS to prevent style conflicts with your application. All styles are contained within the `.react-iro-gradient-picker` class, ensuring they only apply to the color picker components:
|
|
91
|
-
|
|
92
|
-
```tsx
|
|
93
|
-
// ✅ Styles are automatically scoped - no conflicts with your app
|
|
94
|
-
import ColorPicker from 'react-iro-gradient-picker';
|
|
95
|
-
|
|
96
|
-
function MyApp() {
|
|
97
|
-
// Your app's styles remain unaffected
|
|
98
|
-
return (
|
|
99
|
-
<div className='my-app'>
|
|
100
|
-
<h1>My Application</h1>
|
|
101
|
-
<ColorPicker solid value='#ff0000' onChange={() => {}} />
|
|
102
|
-
</div>
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
**Benefits:**
|
|
108
|
-
|
|
109
|
-
- ✅ No global CSS pollution
|
|
110
|
-
- ✅ Safe to use in existing applications
|
|
111
|
-
- ✅ Preserves your app's styling
|
|
112
|
-
- ✅ No additional configuration needed
|
|
113
|
-
|
|
114
87
|
### 🔄 With Reset Functionality
|
|
115
88
|
|
|
116
89
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-iro-gradient-picker",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Modern React gradient and solid color picker with complete dark theme support, built with TypeScript and Tailwind CSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -31,9 +31,10 @@
|
|
|
31
31
|
},
|
|
32
32
|
"main": "dist/index.js",
|
|
33
33
|
"module": "dist/index.es.js",
|
|
34
|
+
"style": "dist/index.css",
|
|
34
35
|
"types": "dist/index.d.ts",
|
|
35
36
|
"source": "src/index.tsx",
|
|
36
|
-
"sideEffects":
|
|
37
|
+
"sideEffects": false,
|
|
37
38
|
"engines": {
|
|
38
39
|
"node": ">=14.0.0",
|
|
39
40
|
"npm": ">=6.0.0"
|