Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/homerchen19/react-linear-gradient-button
React linear gradient button component.
https://github.com/homerchen19/react-linear-gradient-button
Last synced: 1 day ago
JSON representation
React linear gradient button component.
- Host: GitHub
- URL: https://github.com/homerchen19/react-linear-gradient-button
- Owner: homerchen19
- Created: 2018-05-13T08:10:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-23T08:14:21.000Z (over 6 years ago)
- Last Synced: 2024-09-21T11:48:01.041Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://xxhomey19.github.io/react-linear-gradient-button/
- Size: 554 KB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
react-linear-gradient-button
React linear gradient button component
**[DEMO](https://xxhomey19.github.io/react-linear-gradient-button/)**
## Install
```
$ npm install react-linear-gradient-button
```
## Usage
```js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GradientButton from 'react-linear-gradient-button';
class Basic extends Component {
render() {
return BUTTON;
}
}
ReactDOM.render(, document.getElementById('root'));
```
## Features
* No external CSS file.
* Built with [**styled-components**](https://github.com/styled-components/styled-components) 💅
## Props
| Props | Type | Default | Description |
| :------------------------ | :----------------------------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `String` \|\| `Node` | **Required** | Content of the button. |
| theme | `String` | `"Vanusa"` | Gradient theme from [uigradients](https://uigradients.com/). |
| disabled | `Bool` | `false` | Should render a disabled button. |
| gradient | `[String]` | `null` | Array of colors (e.g., `['#f00b47', '#0f6bb6']`, `[rgba(255,0,0,0), rgba(255,0,0,1)]`).
**NOTE**: this props has higher level then `theme`. |
| angle | `String` | `"right"` | The angle or direction of linear gradient (e.g., `"bottom"`, `"30deg"`).
Check **Using Angles** section on [w3schools/css3_gradients](https://www.w3schools.com/css/css3_gradients.asp) for more information. |
| padding | `Number` \|\| `String` \|\| `[Number]` \|\| `[String]` | `10` | The CSS `padding` argument of the button. Could be an array of four sides, just like CSS.
Unit is **px**. |
| borderRadius | `Number` | `20` | The CSS `border-radius` argument of the button.
Unit is **px**. |
| borderWidth | `Number` | `2` | The CSS `border-width` argument of the button.
Unit is **px**. |
| background | `String` | `"#fff"` | The CSS `background-color` argument of the button. |
| color | `String` | `"#ae3560"` | The CSS `color` argument of the button. |
| fontSize | `Number` | `16` | The CSS `font-size` argument of the button. |
| transition | `Object` | See following | The CSS `transition` argument of the button. |
| transition.property | `String` | `"all"` | The CSS `transition-property` argument of the button. |
| transition.duration | `Number` | `0.2` | The CSS `transition-duration` argument of the button.
Unit is **second**. |
| transition.timingFunction | `String` | `"ease-in-out"` | The CSS `transition-timing-function` argument of the button. |
| transition.delay | `Number` | `0` | The CSS `transition-delay` argument of the button.
Unit is **second**. |
## License
MIT © [xxhomey19](https://github.com/xxhomey19)