uiGradients

Installation

npm install --save uigradients

Examples

Gradient Component

// Import the component...
import { Gradient } from 'uigradients';

// Now, use it!
class App extends Component {
    // If no gradient name is provided,
    // a random one will be chosen.
    return (
      <Gradient gradient="cherry">
        <h1>This will draw a div with a cherry gradient, like the one you're looking at right now.</h1>
      </Gradient>
    );
}

cherry is only one of the many presets provided by uigradients

A complete list of the gradient presets can be found here. Test out these presets, or create your own! But be sure to PR your creation so the rest of the community can benefit from your ascetic awesomeness!

Gradient Generator

import { generator } from 'uigradients';

generator({gradient: '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 a styled-component

import { generator } from 'uigradients';
import styled from 'styled-components';

const Pre = styled.pre`
  ${generator({gradient: 'electric_violet'})}
  border-radius: 4px;
  display: block;
`;

And render the component

import { generator } from 'uigradients';
import styled from 'styled-components';

const Pre = styled.pre`
  ${generator({gradient: 'electric_violet'})}
  border-radius: 4px;
  display: block;
`;

Or, you can override other properties on the Gradient component

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

<Header gradient="day_tripper">
  Awesome!
</Header>

Author

Built by Garet McKinley

License

This package is released under the MIT License