1.0.27 • Published 9 months ago
react-style-props v1.0.27
react-style-props
Style your React components using defined style props easily.
install
npm install react-style-props
usage
// set up YourComponent.tsx
import { HtmlHTMLAttributes, ReactElement, Ref, forwardRef } from "react";
import styled from "@emotion/styled";
import { DefaultConfigType, resolveProps } from "react-style-props"; // add...(1)
export interface YourComponentInterface
extends HtmlHTMLAttributes<HTMLDivElement>,
DefaultConfigType {} // add...(2)
const YourComponent = ({ children, ...props }: YourComponentInterface): ReactElement => {
const { styleString, otherProps } = resolveProps(props); // add...(3)
return (
<$YourComponent css={styleString} {...otherProps} {/** add...(4) */}>
{children}
</$YourComponent>
);
};
export default YourComponent;
const $YourComponent = styled("div")<any>`
${({ css }) => css} // add...(5)
`;
// use
<YourComponent ac fullV>
<YourTxt fs={14} fw={700} mr0mlAuto mouseCss>
Hello
</YourTxt>
</YourComponent>
Supported props
- All CSS properties are supported
Special Style Props
Layout Props
flex
: Enable flex displayjc
: Enable flex and justify-content: centerac
: Enable flex and align-items: centerbetween
: Enable flex with justify-content: space-betweencolumn
,col
: Enable flex with flex-direction: columnrow
: Enable flex with flex-direction: rowabsolute
,fixed
,relative
,sticky
: Set position
Size Props
w
,width
: Set element widthh
,height
: Set element heightsize
: Set both width and height (can use array width, height or widthHeight)fullP
: Set width: 100% and height: 100%fullV
: Set width: 100vw and height: 100vh
Margin & Padding Props
m
,margin
: Set all marginsmx
: Set horizontal margins (left & right)my
: Set vertical margins (top & bottom)mt
,mr
,mb
,ml
: Set individual marginsp
,padding
: Set all paddingpx
: Set horizontal paddingpy
: Set vertical paddingpt
,pr
,pb
,pl
: Set individual padding
Text Props
fs
,fontSize
: Set font sizefw
,fontWeight
: Set font weighttextCenter
: Set text-align: centertextLeft
: Set text-align: lefttextRight
: Set text-align: rightellipsis
: Enable text ellipsis with overflow
Mouse Interaction Props
pointer
: Set cursor: pointermouseCss
: Apply hover and active effects for mouse interaction
Border Props
round3
,round4
,round5
,round8
: Preset border-radius valuesborder
: Set border styleborderRadius
: Set border radius
Other Props
none
: Set display: nonejc
: Set justify-content: center with display: flexac
: Set align-items: center with display: flexmr0mlAuto
: Set margin-right: 0; margin-left: auto;ml0mrAuto
: Set margin-left: 0; margin-right: auto;
More props are available. See github: react-style-props ...types/index.d.ts
License
MIT
1.0.27
9 months ago
1.0.26
9 months ago
1.0.25
9 months ago
1.0.23
10 months ago
1.0.22
10 months ago
1.0.21
10 months ago
1.0.20
10 months ago
1.0.19
10 months ago
1.0.18
10 months ago
1.0.17
10 months ago
1.0.16
10 months ago
1.0.15
10 months ago
1.0.14
10 months ago
1.0.13
10 months ago
1.0.12
10 months ago
1.0.11
10 months ago
1.0.10
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago