Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mukhindev/react-spacing
Add margin and padding without creating a DOM-wrapper
https://github.com/mukhindev/react-spacing
react ui
Last synced: 3 days ago
JSON representation
Add margin and padding without creating a DOM-wrapper
- Host: GitHub
- URL: https://github.com/mukhindev/react-spacing
- Owner: mukhindev
- Created: 2024-05-11T23:08:49.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-13T18:29:24.000Z (6 months ago)
- Last Synced: 2024-05-13T19:44:49.543Z (6 months ago)
- Topics: react, ui
- Language: TypeScript
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @mukhindev/react-spacing
Add margin and padding without creating a DOM-wrapper
## Install
⚠️ Dependencies: Your project need work with CSS modules.
```
npm install @mukhindev/react-spacing
```
## CSS Modules
Package components use the CSS modules without pre-processing, so you can process them to suit your build. Vite and Next.js support CSS modules.
## Example
```JavaScript
import Spacing from "@mukhindev/react-spacing";
export default function App() {
return (
Hello World!
Greet
)
}
```
DOM:
```html
Hello World!
Greet
```
## Element requirements
The wrapped element must support `className` and `style` props.
## Props
| Prop | Spacing | Value | Priority |
|------|-----------------|------------------------|----------|
| `m` | margin | string, number, array | 1 |
| `mt` | margin-top | string, number | 2 |
| `mr` | margin-right | string, number | 2 |
| `mb` | margin-bottom | string, number | 2 |
| `ml` | margin-left | string, number | 2 |
| `p` | padding | string, number, array | 1 |
| `pt` | padding-top | string, number | 2 |
| `pr` | padding-right | string, number | 2 |
| `pb` | padding-bottom | string, number | 2 |
| `pl` | padding-left | string, number | 2 |
## Values
`string` — no transform
`number` — as px
`array` — see Array values table
## Array values
Array values works with `m` and `p`
| Values | Meaning |
|--------------------|--------------------------------------|
| `[42]` | [`all`] |
| `[42, 42]` | [`top and bottom`, `right and left`] |
| `[42, 42, 42]` | [`top`, `right and left`, `bottom`] |
| `[42, 42, 42, 42]` | [`top`, `right`, `bottom`, `left`] |