Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sakmaral/lib
Library of reusable helpers and components for UI and styling in React projects
https://github.com/sakmaral/lib
react storybook styled-components
Last synced: about 1 month ago
JSON representation
Library of reusable helpers and components for UI and styling in React projects
- Host: GitHub
- URL: https://github.com/sakmaral/lib
- Owner: sakmaral
- Created: 2024-11-15T21:38:23.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-19T21:34:35.000Z (2 months ago)
- Last Synced: 2024-12-19T04:39:18.424Z (about 1 month ago)
- Topics: react, storybook, styled-components
- Language: TypeScript
- Homepage:
- Size: 241 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @sakmaral/lib
**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.
## Installation
You can install the library using `yarn`, `npm`, or `pnpm`.
### Yarn
```sh
yarn add @sakmaral/lib
```
### Npm
```sh
npm install @sakmaral/lib
```
### Pnpm
```sh
pnpm install @sakmaral/lib
```
## Components
#### **Box**
Container that extends div
| name | type | description | example |
| ---- | ----------------- | ------------------------------------------------------------- | ------------------------------------------------------------------ |
| $top | Integer \| String | Margin-top property. If it's a number, it's converted to rem. | ` ... `
` ... ` |
| $bg | String | Background color. | ` ... ` |
#### **Text**
A styled p component for text that supports dynamic font sizing, line height, color, font weight, and more. It is fully customizable through props
#### **IsDesktop**
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.
#### **IsMobile**
A component that hides its children on screens larger than sm breakpoint (i.e., desktop-sized screens).
## Utils
#### **formatDate**
The formatDate function formats a date into a localized string based on the provided locale and options.
#### **getUserLocale**
The user's locale as a string (e.g., "en-US"). Defaults to "en-US" if no locale is available.
#### **convertPxToUnit**
Converts a pixel value to a specified CSS unit
#### **formatRelativeTime**
Formats a relative time value into a localized string.