1.0.27 • Published 9 months ago

react-style-props v1.0.27

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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 display
  • jc: Enable flex and justify-content: center
  • ac: Enable flex and align-items: center
  • between: Enable flex with justify-content: space-between
  • column, col: Enable flex with flex-direction: column
  • row: Enable flex with flex-direction: row
  • absolute, fixed, relative, sticky: Set position

Size Props

  • w, width: Set element width
  • h, height: Set element height
  • size: 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 margins
  • mx: Set horizontal margins (left & right)
  • my: Set vertical margins (top & bottom)
  • mt, mr, mb, ml: Set individual margins
  • p, padding: Set all padding
  • px: Set horizontal padding
  • py: Set vertical padding
  • pt, pr, pb, pl: Set individual padding

Text Props

  • fs, fontSize: Set font size
  • fw, fontWeight: Set font weight
  • textCenter: Set text-align: center
  • textLeft: Set text-align: left
  • textRight: Set text-align: right
  • ellipsis: Enable text ellipsis with overflow

Mouse Interaction Props

  • pointer: Set cursor: pointer
  • mouseCss: Apply hover and active effects for mouse interaction

Border Props

  • round3, round4, round5, round8: Preset border-radius values
  • border: Set border style
  • borderRadius: Set border radius

Other Props

  • none: Set display: none
  • jc: Set justify-content: center with display: flex
  • ac: Set align-items: center with display: flex
  • mr0mlAuto: 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