https://github.com/elevenpassin/react-button-component
A simple react button component with basic styles. Think of it as a lego block :)
https://github.com/elevenpassin/react-button-component
button component extendable react simple styled
Last synced: about 1 month ago
JSON representation
A simple react button component with basic styles. Think of it as a lego block :)
- Host: GitHub
- URL: https://github.com/elevenpassin/react-button-component
- Owner: elevenpassin
- Created: 2018-04-14T16:58:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-14T17:46:53.000Z (about 8 years ago)
- Last Synced: 2025-02-24T06:49:23.981Z (over 1 year ago)
- Topics: button, component, extendable, react, simple, styled
- Language: JavaScript
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-button-component
A simple react button component based on styled-components with basic styles. Great when you want a quick button that looks neat enough and is yet, customizable to the heart!
## Installation
```js
yarn add react-button-component
```
## Usage
To use the Button component, simply import it into your project, and use it just like any other component!
### The base component
By default, the button has some base styles applied to make it look clean!
```js
import React, { Component } from 'react';
import Button from 'react-button-component';
class App extends Component {
render() {
return (
alert('Welcome!')}>
Hop in!
);
}
}
export default App;
```
Result:
### Easily extend and overwrite with styled-components
The button component is styled using styled-components library, which means you the Button component is in fact, a Styled component! Now you can use `Button.extend` to extend the styles till your heart is content! For example, we can modify the default component in the above file to have a custom style matching a particular theme:
```js
import React, { Component } from 'react';
import Button from 'react-button-component';
import logo from './logo.svg';
import './App.css';
const CustomizedButton = Button.extend`
color: #FFF;
border: none;
border-radius: 5px;
background: linear-gradient(70deg, #FF5686, #FF7B9E);
border-bottom: 5px solid #C44267;
`
class App extends Component {
render() {
return (
alert('bonkers!')}>
Chearful!
);
}
}
export default App;
```
Result:
## Created by
buoyantair
## License
MIT