shintarou v0.0.34
shintarou/新太郎
shintarou/新太郎 is an npm package to make building web layout easy. This lib has 3 components to create a web ui for reactjs app. shintarou is easy to install and to use.
requirements
- nodejs: v16.9 - v18
- package manager: npm/yarn/pnpm
How to install
# npm
npm install shintarou
# yarn
yarn add shintarou
# pnpm
pnpm add shintarou
How to use shintarou/新太郎
Box
Box
is the same as div
but you don't need to use style={{css}}
for styling a div. You can pass backgroundColor, width, height etc as props.
import { Box } from 'shintarou'
interface MyFirstBoxProps {
title: string
backgroundColor: string
}
export function MyFirstBox({ title, backgroundColor}: MyFirstBoxProps): JSX.Element {
return (
<Box backgroundColor={backgroundColor} width="20rem" height="20rem">{title}</Box>
)
}
codesandbox
https://codesandbox.io/p/sandbox/shintarou-box-8s737k
Flex
Flex
is div
with flex box
.
import { Box, DIRECTION_COLUMN, DIRECTION_ROW, Flex } from "shintarou";
interface MyFirstFlex {
direction: string;
}
export function MyFirstFlex({ direction }: MyFirstFlex): JSX.Element {
return (
<Flex
flexDirection={direction === "col" ? DIRECTION_COLUMN : DIRECTION_ROW}
gridGap="1rem"
>
<Box width="10rem" height="10rem" backgroundColor="#ff00ff" />
<Box width="10rem" height="10rem" backgroundColor="#0000ff" />
<Box width="10rem" height="10rem" backgroundColor="#ff0000" />
</Flex>
);
}
codesandbox
https://codesandbox.io/p/sandbox/shintarou-flex-5jdj4k
Grid
Grid
is div
with grid
.
import { Box, Grid } from "shintarou";
export function MyFirstGrid(): JSX.Element {
return (
<Grid
gridTemplateColumns="auto auto auto"
padding="1rem"
color="black"
gridGap="1rem"
>
<Box width="10rem" height="10rem" backgroundColor="#ff00ff">
1
</Box>
<Box width="10rem" height="10rem" backgroundColor="#0650ff">
2
</Box>
<Box width="10rem" height="10rem" backgroundColor="#af030a">
3
</Box>
<Box width="10rem" height="10rem" backgroundColor="#ffaaff">
4
</Box>
<Box width="10rem" height="10rem" backgroundColor="#0000ff">
5
</Box>
<Box width="10rem" height="10rem" backgroundColor="#dadada">
6
</Box>
</Grid>
);
}
codesandbox
https://codesandbox.io/p/sandbox/shintarou-grid-v85pny
support props
export interface ColorProps {
color?: string
backgroundColor?: string
opacity?: string | number
}
export interface TypographyProps {
fontSize?: string | number
fontWeight?: string | number
fontStyle?: string
lineHeight?: string | number
textAlign?: string
textTransform?: string
textDecoration?: string
}
export interface SpacingProps {
margin?: string | number
marginX?: string | number
marginY?: string | number
marginTop?: string | number
marginRight?: string | number
marginBottom?: string | number
marginLeft?: string | number
padding?: string | number
paddingX?: string | number
paddingY?: string | number
paddingTop?: string | number
paddingRight?: string | number
paddingBottom?: string | number
paddingLeft?: string | number
}
export interface BorderProps {
border?: string
borderTop?: string
borderRight?: string
borderBottom?: string
borderLeft?: string
borderRadius?: string | number
borderWidth?: string | number
borderColor?: string
boxShadow?: string
}
export interface FlexboxProps {
flex?: string | number
alignItems?: string
alignSelf?: string
justifyContent?: string
flexDirection?: string
flexWrap?: string
flexFlow?: string
alignContent?: string
whiteSpace?: string
}
export interface GridProps {
columnGap?: string | number
rowGap?: string | number
gridGap?: string | number
gridTemplateAreas?: string
gridTemplateRows?: string
gridTemplateColumns?: string
gridArea?: string | number
gridRow?: string | number
gridColumn?: string | number
}
export interface LayoutProps {
display?: string
size?: string | number
width?: string | number
minWidth?: string | number
maxWidth?: string | number
height?: string | number
minHeight?: string | number
maxHeight?: string | number
overflow?: CSSProperties['overflow']
overflowX?: CSSProperties['overflowX']
overflowY?: CSSProperties['overflowY']
wordSpacing?: string | number
cursor?: CSSProperties['cursor']
overflowWrap?: string
}
export interface PositionProps {
position?: string
zIndex?: string | number
top?: string | number
right?: string | number
bottom?: string | number
left?: string | number
transform?: string
transformOrigin?: CSSProperties['transformOrigin']
}
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago