How to use reflexbox - 10 common examples

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: '' }

henry40408 / awesome-stars / app / scripts / components / RateLimit.jsx View on Github

${({ percentage }) =&gt; RLFilling({ percentage })};
  height: 100%;
  width: ${({ percentage }) =&gt; percentage}%;
`;

const RLMeter = reflex(BaseRLMeter);

const BaseRLNumber = styled.div`
  color: ${({ inverse }) =&gt; (inverse ? colors.white : colors.darkGray)};
  font-size: ${({ heightInRem }) =&gt; heightInRem * (heightInRem &gt; 1 ? 0.5 : 0.9)}rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const RLNumber = reflex(BaseRLNumber);

const RateLimit = ({ heightInRem, inverse, remaining, total }) =&gt; {
  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 (

henry40408 / awesome-stars / app / scripts / components / RateLimit.js View on Github

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'

henry40408 / awesome-stars / app / scripts / components / RateLimit.jsx View on Github

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;

henry40408 / awesome-stars / app / scripts / components / RateLimit.js View on Github

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;

henry40408 / awesome-stars / app / scripts / components / RateLimit.js View on Github

${({ percentage }) =&gt; RLFilling({ percentage })};
  height: 100%;
  width: ${({ percentage }) =&gt; percentage}%;
`

let RLMeter = reflex(BaseRLMeter)

let BaseRLNumber = styled.div`
  color: ${({ inverse }) =&gt; (inverse ? colors.white : colors.darkGray)};
  font-size: ${({ heightInRem }) =&gt; heightInRem * (heightInRem &gt; 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 }) =&gt; {
  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 (

henry40408 / awesome-stars / app / scripts / components / RateLimit.jsx View on Github

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;

reactbits / fiber / lib / channel / addchannel.js View on Github

_reactBootstrap.Modal.Header,
            { closeButton: true },
            _react2.default.createElement(
              _reactBootstrap.Modal.Title,
              null,
              'Create new channel'
            )
          ),
          _react2.default.createElement(
            _reactBootstrap.Modal.Body,
            null,
            _react2.default.createElement(
              _reflexbox.Flex,
              null,
              _react2.default.createElement(
                _reflexbox.Box,
                { col: 12 },
                _react2.default.createElement(_reactbitsInput.Input, inputs.name),
                _react2.default.createElement(_reactbitsInput.Input, inputs.description)
              )
            )
          ),
          _react2.default.createElement(
            _reactBootstrap.Modal.Footer,
            null,
            _react2.default.createElement(
              _reactBootstrap.Button,
              { type: 'submit', bsStyle: 'primary' },
              'Create'
            ),
            _react2.default.createElement(
              _reactBootstrap.Button,

reactbits / fiber / lib / channel / addchannel.js View on Github

_reactbitsInput.Form,
          { onSubmit: this.props.submit },
          _react2.default.createElement(
            _reactBootstrap.Modal.Header,
            { closeButton: true },
            _react2.default.createElement(
              _reactBootstrap.Modal.Title,
              null,
              'Create new channel'
            )
          ),
          _react2.default.createElement(
            _reactBootstrap.Modal.Body,
            null,
            _react2.default.createElement(
              _reflexbox.Flex,
              null,
              _react2.default.createElement(
                _reflexbox.Box,
                { col: 12 },
                _react2.default.createElement(_reactbitsInput.Input, inputs.name),
                _react2.default.createElement(_reactbitsInput.Input, inputs.description)
              )
            )
          ),
          _react2.default.createElement(
            _reactBootstrap.Modal.Footer,
            null,
            _react2.default.createElement(
              _reactBootstrap.Button,
              { type: 'submit', bsStyle: 'primary' },
              'Create'

rebassjs / rebass / packages / layout / styled-components / index.js View on Github

var Tiles = (0, _react.forwardRef)(function (_ref, ref) {
  var width = _ref.width,
      columns = _ref.columns,
      _ref$gap = _ref.gap,
      gap = _ref$gap === void 0 ? 3 : _ref$gap,
      props = _objectWithoutProperties(_ref, ["width", "columns", "gap"]);

  var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
  return _react["default"].createElement(_styledComponents.Box, _extends({
    ref: ref,
    tx: "layout",
    variant: "tiles"
  }, props, {
    __css: {
      display: 'grid',
      gridGap: gap,
      gridTemplateColumns: gridTemplateColumns
    }
  }));
});
exports.Tiles = Tiles;

How to use reflexbox - 10 common examples

To help you get started, we’ve selected a few reflexbox examples, based on popular ways it is used in public projects.

reflexbox

Package Health Score

Popular reflexbox functions

Similar packages