https://github.com/elementsweb/react-color-attribute
React component for product color attributes
https://github.com/elementsweb/react-color-attribute
react
Last synced: 12 months ago
JSON representation
React component for product color attributes
- Host: GitHub
- URL: https://github.com/elementsweb/react-color-attribute
- Owner: elementsweb
- License: mit
- Created: 2019-08-01T18:29:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:02:24.000Z (about 3 years ago)
- Last Synced: 2025-02-10T01:38:07.813Z (about 1 year ago)
- Topics: react
- Language: TypeScript
- Homepage: https://elementsweb.github.io/react-color-attribute/
- Size: 4.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-color-attribute
React component for rendering product color attributes.
[Click here for demo.](https://elementsweb.github.io/react-color-attribute/)
## Installation
Install the package from npm:
```
npm install --save react-color-attribute
```
## Usage
```
import ColorAttribute from 'react-color-attribute';
```
### Props
|Name|Type|Default|Description|
|---|---|---|---|
|`colors`|`string[]`|`[]`|Valid CSS colors to render in attribute component|
|`id`|`string`||Unique identifier for the color attribute|
|`selected`|`boolean`|`false`|Determines if the component should render in a selected state|
|`onMouseEnter`|`function`||Callback fired when mouse enters component
**Signature:**
`function(id: string) => void`|
|`onMouseLeave`|`function`||Callback fired when mouse leaves component
**Signature:**
`function(id: string) => void`|
|`onClick`|`function`||Callback fired when component is clicked component
**Signature:**
`function(id: string) => void`|
