Skip to content

(WIP) Typescript fork of uigradients library, updated and maintained for React.js >= 16.8.x | Gradients as styled-components

License

Notifications You must be signed in to change notification settings

sar/uigradients-typescript

Β 
Β 

Repository files navigation

UIGradients Logo

CircleCI npm npm GitHub

πŸ’Ύ Installation

npm install --save uigradients

or

yarn add uigradients

πŸ“š Docs

Components

Utilities

πŸ— Usage Examples

Linear Gradient Component

// 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 (
      <Gradient preset="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 previewed here. You can use your own preset library via GradientProvider

Radial Gradient Component

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
      <Gradient preset="aubergine" type="radial">
        <h1>Wow, a radial gradient!</h1>
      </Gradient>
    );
}

Gradient Generator

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

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

This is what an electric_violet pre looks like!

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

Awesome!

Or, you can generate a radial gradient

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

const RadialComponent = styled.div`
  ${generator({gradient: 'electric_violet', type: 'radial'})}
`;

And render the component

Radial gradient

πŸ“œ License

This package is released under the MIT License

sponsored by syntra.io

About

(WIP) Typescript fork of uigradients library, updated and maintained for React.js >= 16.8.x | Gradients as styled-components

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%