Nitrogen Poisonous Monoxide

    uigradients

    1.0.0 • Public • Published
    UIGradients Logo

    CircleCI npm npm GitHub

    💾 Installation

    npm install --save uigradients
    

    or

    yarn add uigradients
    

    📚 Docs

    Components

    Utilities

    Or, go to the interactive docs →

    🏗 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

    Keywords

    none

    Install

    npm i uigradients

    DownloadsWeekly Downloads

    16

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    402 kB

    Total Files

    30

    Last publish

    Collaborators

    • garetmckinley
    • jsbro