Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AriTheElk/uigradients
Gradients-as-a-react-component™
https://github.com/AriTheElk/uigradients
gradient-generator react reactjs styled-components
Last synced: 22 days ago
JSON representation
Gradients-as-a-react-component™
- Host: GitHub
- URL: https://github.com/AriTheElk/uigradients
- Owner: AriTheElk
- License: mit
- Created: 2016-11-04T09:37:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-11-05T08:18:59.000Z (almost 5 years ago)
- Last Synced: 2024-08-23T13:19:37.221Z (27 days ago)
- Topics: gradient-generator, react, reactjs, styled-components
- Language: JavaScript
- Homepage: https://uigradients.syntra.io
- Size: 1.1 MB
- Stars: 229
- Watchers: 5
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
* [💾 Installation](#-installation)
* [📚 Docs](#-docs)
* [🏗 Usage Examples](#-usage-examples)
* [📜 License](#-license)
## 💾 Installation
npm install --save uigradients
or
yarn add uigradients
## 📚 Docs
### Components
- [`Gradient`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradient--linear-gradient)
- [`GradientProvider`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradientprovider--usage)
### Utilities
- [`generator`]()
#### [Or, go to the interactive docs →](https://garetmckinley.github.io/uigradients)
## 🏗 Usage Examples
### Linear Gradient Component
``` jsx
// Import the component...
import { Gradient } from 'uigradients';
// Now, use it!
class App extends Component {
// If no gradient preset is provided,
// a random preset will be used.
return (
This will draw a div with a cherry gradient, like the one you're looking at right now.
);
}
```
> ###### `cherry` is only one of the many presets provided by [_`uigradients`_](https://jsbros.github.io/uigradients/)
> A complete list of the gradient presets can be previewed [here](https://0df99f9c-6d93-4766-a009-1f633aa91579.sbook.io/).
> You can use your own preset library via [`GradientProvider`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradientprovider--usage)
### Radial Gradient Component
``` jsx
import { Gradient } from 'uigradients';
class App extends Component {
return (
// Add a "type" attribute on your component and
// set it to "radial" for a radial gradient!
// NOTE: If a "type" attribute is not on
// your component, the gradient type will
// default to linear
Wow, a radial gradient!
);
}
```
### Gradient Generator
``` jsx
import { generator } from 'uigradients';
generator({preset: 'intuitive_purple'});
/* The function above returns:
background-color: ,#DA22FF,;
background-image: -webkit-linear-gradient(
left,
,#DA22FF,,
,#9733EE,);
background-image: linear-gradient(
to left,
,#DA22FF,,
,#9733EE,);
*/
```
### 💅 Styled Components
#### Use the Generator in `styled-components`
``` jsx
import { generator } from 'uigradients';
import styled from 'styled-components';
const Pre = styled.pre`
${generator({preset: 'electric_violet'})}
border-radius: 4px;
display: block;
`;
```
#### And render the component
#### Or, you can override other properties on the Gradient component
``` jsx
import { Gradient } from 'uigradients';
import styled from 'styled-components';
const Header = styled(Gradient)`
min-height: 300px;
text-align: center;
width: 100%;
`;
```
#### And render the component
#### Or, you can generate a radial gradient
```js
import { generator } from 'uigradients';
import styled from 'styled-components';
const RadialComponent = styled.div`
${generator({gradient: 'electric_violet', type: 'radial'})}
`;
```
#### And render the component
## 📜 License
This package is released under the [MIT License](LICENSE)
