How to use reactackle-core - 9 common examples

To help you get started, we’ve selected a few reactackle-core 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.

github bcrumbs / reactackle / packages / reactackle-breadcrumbs / src / BreadcrumbsItem / styles / BreadcrumbsItemStyled.js View on Github external
const size = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);

  const {
    maxWidth,
  } = theme.reactackle.components.breadcrumbs.item;

  return css`
    ${maxWidth && `max-width: ${getValueString(maxWidth)};`}
  `;
};
github bcrumbs / reactackle / packages / reactackle-sidebar / src / SidebarToggle / styles / ToggleIconStyled.js View on Github external
const iconSize = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const {
    width,
    height,
    imgSize,
  } = theme.reactackle.components.sidebar.toggleButton.icon;

  return css`    
    ${iconSizeMixin(
      getValueString(height),
      getValueString(imgSize || height),
      getValueString(width || height),
    )}
  `;
};
github bcrumbs / reactackle / packages / reactackle-button / src / styles / ButtonIconStyled.js View on Github external
const iconStyleProps = ({
  theme: themeFromProvider,
}) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const path = theme.reactackle.components.button;
  const opacityAmount = path.iconOpacity;

  return css`
    opacity: ${opacityAmount};   
    
    svg {
      fill: currentColor;
    }
  `;
};
github bcrumbs / reactackle / packages / reactackle-menu / src / MenuItem / styles / AnchorStyled.js View on Github external
const size = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const {
    minHeight,
    paddingY,
    paddingX,
  } = theme.reactackle.components.menu.item;

  return css`
    min-height: ${getValueString(minHeight)};
    padding: ${getValueString(paddingY)} ${getValueString(paddingX)};
  `;
};
github bcrumbs / reactackle / packages / reactackle-text-field / src / styles / IconInnerStyled.js View on Github external
const iconBase = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const { iconSpacing } = theme.reactackle.components.textfield.iconInner;

  return `
    margin-right: ${getValueString(iconSpacing)};
  `;
};
github bcrumbs / reactackle / packages / reactackle-progress / src / CircleProgress / styles / SecondaryLineStyled.js View on Github external
const style = ({ theme: themeFromProvider, customThickness }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;
  
  const { strokeSize } = componentTheme.circle.strokeSize;

  return css`
    stroke-width: ${getValueString(customThickness || strokeSize)};
  `;
};
github bcrumbs / reactackle / packages / reactackle-progress / src / LinearProgress / styles / SecondaryLineStyled.js View on Github external
const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
  `;
};
github bcrumbs / reactackle / packages / reactackle-progress / src / LinearProgress / styles / PrimaryLineStyled.js View on Github external
const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
  `;
};
github bcrumbs / reactackle / packages / reactackle-progress / src / LinearProgress / styles / SplitterStyled.js View on Github external
const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
    background-color: ${Color(componentTheme.linear.mainLine.color).string()};
  `;
};

reactackle-core

Core utils of the Reactackle ui library

MIT
Latest version published 6 years ago

Package Health Score

45 / 100
Full package analysis

Popular reactackle-core functions