Skip to main content

Helper Utilities

This page summarizes the helper utilities in Bestax, with a brief description, usage example, and links to full documentation for each. Use these helpers to simplify class name management and apply Bulma utility classes in a type-safe, composable way.

useBulmaClasses​

A custom React hook that generates Bulma helper class strings from a set of props. Makes it easy to apply color, spacing, alignment, typography, flexbox, and other Bulma utility classes to your components. Returns both the class string and the remaining props for spreading onto elements.

Color​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Button color="primary">Primary Button</Button>

Color Palette​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Box bgColor="info" colorShade="30">
  Info 30
</Box>

Spacing​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Box m="4" px="2" py="5">
  Box with margin and padding
</Box>

Typography​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Box
  textSize="3"
  textAlign="centered"
  textTransform="uppercase"
  textWeight="bold"
  fontFamily="monospace"
>
  Typography Example
</Box>

Visibility​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Button visibility="hidden" viewport="mobile">
  Hidden on Mobile
</Button>

Flexbox​

info

More examples and full property coverage are available in usebulmaclasses.md.

<Box
  display="flex"
  flexDirection="row"
  justifyContent="center"
  alignItems="center"
>
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</Box>

Other​

Additional Bulma helpers are supported via these props:

is-clearfix​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the clearfix prop.

<Box clearfix>
  <Button float="left">Left</Button>
  <Button float="right">Right</Button>
</Box>

is-pulled-left / is-pulled-right​

info

More examples and full property coverage are available in usebulmaclasses.md.

note

Notice in the example that the float is reversing the rendered order of the elements

Use the float prop.

<>
  <Button float="Right">Pulled Right</Button>
  <Button float="left">Pulled Left</Button>
</>

is-overlay​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the overlay prop.

<Box overlay>
  <span>Overlay Content</span>
  <div />
</Box>

is-clipped​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the overflow prop.

<Message overflow="clipped" style={{ width: 200, height: '3.25rem' }}>
  This is a very long line of text that will be clipped and not overflow the
  box.
</Message>

is-radiusless​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the radius prop.

<Button radius="radiusless">Radiusless Button</Button>

is-shadowless​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the shadow prop.

<Box shadow="shadowless">No Shadow</Box>

is-unselectable​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the interaction prop.

tip

Try to select me, bet you can't!

<Box interaction="unselectable">Unselectable Text</Box>

is-clickable​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the interaction prop.

<Box interaction="clickable">Clickable Box</Box>

is-relative​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the relative prop.

<Box relative p="4" style={{ height: '100px', border: '1px dashed #ccc' }}>
  <Tag style={{ position: 'absolute', top: '8px', right: '8px' }}>Badge</Tag>
  Relative container
</Box>

is-cursor-help​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the cursor prop.

<Box cursor="help">Hover for help cursor</Box>

is-full-height​

info

More examples and full property coverage are available in usebulmaclasses.md.

Use the fullHeight prop.

<Columns>
  <Column>
    <Notification color="primary" fullHeight>
      Short content
    </Notification>
  </Column>
  <Column>
    <Notification color="info" fullHeight>
      Taller content that takes more space to demonstrate equal height
    </Notification>
  </Column>
</Columns>

View full documentation.

classNames​

A utility function for conditionally joining class names together. Accepts any mix of strings, numbers, arrays, or objects, and returns a space-separated string of unique class names. Useful for dynamically constructing className values in React and other frameworks.

classNames('column', 'is-half', {
  'has-text-primary': true,
  'is-hidden': false,
});
// => 'column is-half has-text-primary'

View full documentation.

Theme​

A component that injects Bulma CSS variables for local or global theming. Wrap any subtree in <Theme> to override design tokens like colors, typography, and spacing without writing custom CSS.

View full documentation.

ConfigProvider​

A context provider for global settings like class prefix and icon library. Wrap your app in <ConfigProvider> to configure all bestax-bulma components at once.

View full documentation.

For more details and advanced usage, see the full documentation for each helper linked above.