Installation
npm install --save uigradients
Examples
Linear 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 byuigradients
A complete list of the gradient presets can be previewed 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 aesthetic awesomeness!
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 gradient="aubergine" type="radial">
<h1>Wow, a radial gradient!</h1>
</Gradient>
);
}
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,);
*/
uiGradients also supports radial gradients.
When using the generator
function to create a radial gradient, two additional properties of type
and options
should be present on the object passed into generator
.
The type
and options
properties are only required when generating a radial gradient. Passing an object with only a gradient
property will generate a linear gradient.
import { generator } from 'uigradients';
generator({
gradient: 'intuitive_purple',
type: 'radial',
options: {
position: '45px 20px',
shape: 'ellipse', // 'circle' or 'ellipse'
colorStops: ['20%', '50%'], // Can be percentage or pixel values
extent: 'farthest-corner'
}
});
/* The function above returns:
background-image: -webkit-radial-gradient(
ellipse farthest-corner at 45px 20px,
#DA22FF 20%,
#9733EE 50%);
background-image: radial-gradient(
ellipse farthest-corner at 45px 20px,
#DA22FF 20%,
#9733EE 50%);
*/
options
for a Radial Gradient
Configuring the If using the generator
function to create a radial gradient, the following properties are valid configurations for a radial gradient:
{
gradient: 'electric_violet',
type: 'radial'
options: {
position: '45px 20px', // defaults to center if omitted
shape: 'ellipse', // defaults to circle if omitted
colorStops: ['20%', '50%'], // the stop position for each color
extent: 'farthest-corner' // valid options are closest-side, closest-corner, farthest-side, and farthest-corner
}
}
Each property on the options
object maps to the CSS values for radial-gradient.
NOTE: When using the extent
property, the position
property must also be set.
<💅> 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
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
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
Customize a radial gradient
import { generator } from 'uigradients';
import styled from 'styled-components';
const RadialComponent = styled.div`
${generator({
gradient: 'electric_violet',
type: 'radial',
options: {
position: '45px 20px',
shape: 'ellipse',
colorStops: ['20%', '50%'],
extent: 'farthest-corner'
}
}
)}`;
And render the component
Author
Built by Garet McKinley
License
This package is released under the MIT License