How to use the reflexbox.reflex function in reflexbox
To help you get started, we’ve selected a few reflexbox examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
henry40408 / awesome-stars / app / scripts / components / AccessTokenForm.js View on Github 
border: 2px ${({ hasError }) => (hasError ? colors.red : 'transparent')} solid;
box-sizing: border-box;
font-size: ${({ heightInRem }) => heightInRem * 1.1}rem;
padding: ${({ heightInRem }) => heightInRem * 0.5}rem;
width: 100%;
`
let BaseATFButtonContainer = styled.div`
background: ${colors.white};
display: flex;
align-items: center;
justify-content: center;
padding: ${({ heightInRem }) => heightInRem * 0.25}rem;
`
let ATFButtonContainer = reflex(BaseATFButtonContainer)
let ATFButton = styled.button`
box-sizing: border-box;
background-color: ${({ disabled }) => (disabled ? colors.lightGray : colors.darkGray)};
border: 1px solid ${({ disabled }) => (disabled ? colors.lightGray : colors.darkGray)};
color: ${colors.white};
font-size: ${props => props.heightInRem}rem;
height: 100%;
padding: 0.25rem;
text-transform: uppercase;
width: 100%;
`
class AccessTokenForm extends React.Component {
state = { accessToken: '' }
${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`;
const RLMeter = reflex(BaseRLMeter);
const BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;
`;
const RLNumber = reflex(BaseRLNumber);
const RateLimit = ({ heightInRem, inverse, remaining, total }) => {
const formatter = new Intl.NumberFormat('en-US');
let ratio = total === 0 ? 0 : remaining / total;
let formatted;
if (remaining === -1 || total === -1) {
ratio = 0;
formatted = 'N/A';
} else {
formatted = formatter.format(remaining);
}
return (
let BaseRLMeterContainer = styled.div`
border: 1px white solid;
height: ${({ heightInRem }) => heightInRem}rem;
`
let RLMeterContainer = reflex(BaseRLMeterContainer)
let BaseRLMeter = styled.div`
animation: 1.618s ease 0s 1 normal forwards running
${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`
let RLMeter = reflex(BaseRLMeter)
let BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;
`
let RLNumber = reflex(BaseRLNumber)
let RateLimit = ({ heightInRem, hasError, inverse, remaining, total }) => {
let formatter = new Intl.NumberFormat('en-US')
let ratio = 0
let formatted = 'N/A'const BaseRLMeterContainer = styled.div`
border: 1px white solid;
height: ${({ heightInRem }) => heightInRem}rem;
`;
const RLMeterContainer = reflex(BaseRLMeterContainer);
const BaseRLMeter = styled.div`
animation: 1.618s ease 0s 1 normal forwards running
${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`;
const RLMeter = reflex(BaseRLMeter);
const BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;
`;
const RLNumber = reflex(BaseRLNumber);
const RateLimit = ({ heightInRem, inverse, remaining, total }) => {
const formatter = new Intl.NumberFormat('en-US');
let ratio = total === 0 ? 0 : remaining / total;
let formatted;background-color: ${colors.red};
width: 0%;
}
to {
background-color: ${RLFillColor({ percentage })};
width: ${percentage}%;
}
`
let BaseRLMeterContainer = styled.div`
border: 1px white solid;
height: ${({ heightInRem }) => heightInRem}rem;
`
let RLMeterContainer = reflex(BaseRLMeterContainer)
let BaseRLMeter = styled.div`
animation: 1.618s ease 0s 1 normal forwards running
${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`
let RLMeter = reflex(BaseRLMeter)
let BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`
let RLMeter = reflex(BaseRLMeter)
let BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;
`
let RLNumber = reflex(BaseRLNumber)
let RateLimit = ({ heightInRem, hasError, inverse, remaining, total }) => {
let formatter = new Intl.NumberFormat('en-US')
let ratio = 0
let formatted = 'N/A'
if (!hasError) {
ratio = total === 0 ? 0 : remaining / total
formatted = formatter.format(remaining)
}
return (
background-color: ${colors.red};
width: 0%;
}
to {
background-color: ${RLFillColor({ percentage })};
width: ${percentage}%;
}
`;
const BaseRLMeterContainer = styled.div`
border: 1px white solid;
height: ${({ heightInRem }) => heightInRem}rem;
`;
const RLMeterContainer = reflex(BaseRLMeterContainer);
const BaseRLMeter = styled.div`
animation: 1.618s ease 0s 1 normal forwards running
${({ percentage }) => RLFilling({ percentage })};
height: 100%;
width: ${({ percentage }) => percentage}%;
`;
const RLMeter = reflex(BaseRLMeter);
const BaseRLNumber = styled.div`
color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
font-size: ${({ heightInRem }) => heightInRem * (heightInRem > 1 ? 0.5 : 0.9)}rem;
display: flex;
align-items: center;
justify-content: center;reflexbox
Responsive React grid system built with Styled System, with support for Emotion and Styled Components
