Library of reusable helpers and components for UI and styling in React projects
LIBRARY IN DEV
This is a collection of reusable React components and utility functions that help streamline your development process, increase maintainability, and improve UI consistency across projects.
You can install the library using yarn, npm, or pnpm.
yarn add @sakmaral/libnpm install @sakmaral/lib
pnpm install @sakmaral/libContainer that extends div
| name | type | description | example |
|---|---|---|---|
| $top | Integer | String | Margin-top property. If it's a number, it's converted to rem. | <Box $top={20}> ... </Box> <Box $top="20px"> ... </Box> |
| $bg | String | Background color. | <Box $bg="lightgray"> ... </Box> |
A styled p component for text that supports dynamic font sizing, line height, color, font weight, and more. It is fully customizable through props
A component that hides its children on screens smaller than sm breakpoint (i.e., mobile and tablet-sized screens) and shows them on desktop-sized screens. You can also customize the display property for the component.
A component that hides its children on screens larger than sm breakpoint (i.e., desktop-sized screens).
The formatDate function formats a date into a localized string based on the provided locale and options.
The user's locale as a string (e.g., "en-US"). Defaults to "en-US" if no locale is available.
Converts a pixel value to a specified CSS unit
Formats a relative time value into a localized string.