3.2.4 • Published 3 years ago
lgbtq.js v3.2.4
LGBTQ.js
LGBTQ+ pride flag gradients for React projects
View Examples Here: https://ian-antking.github.io/lgbtq.js
Installation
Install via npm
with the following command:
npm i -S lgbtq.js
Importing
Import into your project with named imports:
import { buildFlag } from 'lgbtq.js'
Usage
Gradients
Linear gradients are built with the buildFlag
function. These can then be injected into css or style objects.
buildFlag(options) ⇒ string
Kind: global function
Returns: string - - CSS gradient string.
Access: public
Param | Type | Description |
---|---|---|
options | object | Configuration for the flag to render. |
options.flag | string | The name of the flag to render. |
options.background | string | URL of image to render underneath flag. |
options.opacity | number | Opacity of flag as float between 0 and 1. |
React
import React from 'react';
import { buildFlag } from 'lgbtq.js';
const PrideFlag = {
background: buildFlag({flag, opacity: 1, background: null}),
width: '500px',
height: '300px'
};
return (
<div style={prideFlag}></div>
);
export default PrideFlag;
With Styled Components
import React from 'react';
import styled from 'styled-components';
import { buildFlag } from 'lgbtq.js';
const FlagContainer = styled.div`
width: 500px;
height: 300px;
background: ${props => buildFlag({flag: props.flag, opacity: 1, background: null})};
margin: 10px;
`
const Flag = ({ flag }) => (
<FlagContainer flag="inclusivePride" />
)
export default Flag
Colors
Flag colors are exported under their flag name on the colors
object. They can be accessed like so:
import { colors } from 'lgbtq.js';
console.log(colors.inclusivePride);
console.log(colors.inclusivePride.green);
Flags Included
- agender
- aromantic
- asexual
- bear
- blackTrans
- bisexual
- genderfluid
- genderqueer
- gilbertBakerPride
- inclusivePride
- leather
- lesbian
- lipstickLesbian
- nonbinary
- pan
- polysexual
- pride
- pride1978
- trans
3.2.4
3 years ago
3.2.3
3 years ago
3.2.2
4 years ago
3.2.1
4 years ago
3.2.0
4 years ago
3.1.5
4 years ago
3.1.4
4 years ago
3.1.3
4 years ago
3.1.2
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.0
4 years ago
2.1.4
4 years ago
2.1.3
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.3
4 years ago
1.0.0
4 years ago