jun-young1993
jun-young1993
blog
blog
docs
docs
data-structure
data-structure
Search ...
docs

modules

juny-react-style / Exports

juny-react-style

Table of contents

References
  • SplitContainer

Interfaces
  • AlertProps
  • AlertWrapProps
  • GithubCommentProps
  • GithubReplyProps
  • MacContainerProps
  • SearchBarProps
  • TreeItemProps
  • TreeListProps

Type Aliases
  • ActiveModeType
  • CursorType
  • IntrinsicElementsDiv
  • cornersType
  • lefetOrRightOrTopOrBottom
  • radius
  • size

Variables
  • ActiveMode
  • DarkTheme
  • LightTheme

Functions
  • Alert
  • AlertContainer
  • AlertItem
  • AlertWrap
  • AlignBox
  • BetweenContainer
  • CustomTheme
  • DarkAndLightModeButton
  • GithubComment
  • GithubProfile
  • GithubReply
  • HeadText
  • LeftRightContainer
  • Link
  • List
  • ListItem
  • MacContainer
  • MacContainerHeader
  • MacMenuBar
  • MacMenuBarItem
  • MarginBox
  • Profile
  • Screen
  • SearchBar
  • SearchModal
  • Spinner
  • StyleThemeContextProvider
  • StyleThemeProvider
  • StyledAlert
  • TextBox
  • TextOverFlow
  • TreeHeader
  • TreeItem
  • TreeList
  • useTheme

References

SplitContainer

Renames and re-exports LeftRightContainer

Type Aliases

ActiveModeType

Ƭ ActiveModeType: typeof ActiveMode[keyof typeof ActiveMode]

Defined in

src/component/GithubComment/GithubComment.type.ts:18

CursorType

Ƭ CursorType: "default" | "pointer" | "crosshair" | "text" | "move" | "wait" | "help" | "not-allowed" | "progress" | "context-menu" | "cell" | "vertical-text" | "alias" | "copy" | "no-drop" | "grab" | "grabbing" | "all-scroll" | "zoom-in" | "zoom-out"

Defined in

src/component/index.types.ts:12

IntrinsicElementsDiv

Ƭ IntrinsicElementsDiv: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

Defined in

src/component/index.types.ts:10

cornersType

Ƭ cornersType: "sm" | "md" | "lg" | "full"

Defined in

src/component/index.types.ts:3

lefetOrRightOrTopOrBottom

Ƭ lefetOrRightOrTopOrBottom: "left" | "right" | "top" | "bottom"

Defined in

src/component/index.types.ts:8

radius

Ƭ radius: "sm" | "md" | "lg" | "full"

Defined in

src/component/index.types.ts:7

size

Ƭ size: number

Defined in

src/component/index.types.ts:4

Variables

ActiveMode

• Const ActiveMode: Object

Type declaration

Name Type
PREVIEW "preivew"
WRITE "write"

Defined in

src/component/GithubComment/GithubComment.type.ts:13

DarkTheme

• Const DarkTheme: ThemeType

Defined in

src/component/StyleThemeProvider/DarkTheme.ts:3

LightTheme

• Const LightTheme: ThemeType

Defined in

src/component/StyleThemeProvider/LightTheme.ts:3

Functions

Alert

▸ Alert(props, context?): ReactNode

Parameters

Name Type
props AlertProps
context? any

Returns

ReactNode

Defined in

src/component/Alert/Alert.tsx:156

AlertContainer

▸ AlertContainer(props, context?): ReactNode

Parameters

Name Type
props Object
props.children? ReactNode
context? any

Returns

ReactNode

Defined in

src/component/Alert/AlertContainer.tsx:14

AlertItem

▸ AlertItem<AsTarget, ForwardedAsTarget>(props): Element

Type parameters

Name Type
AsTarget extends void | WebTarget = void
ForwardedAsTarget extends void | WebTarget = void

Parameters

Name Type
props PolymorphicComponentProps<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { $backgroundColor?: string ; $isExiting?: boolean ; level: undefined | "default" | "primary" | "secondary" | "info" | "success" | "danger" | "warning" ; theme: DefaultTheme | default }>, AsTarget, ForwardedAsTarget, AsTarget extends KnownTarget ? ComponentPropsWithRef<AsTarget<AsTarget>> : {}, ForwardedAsTarget extends KnownTarget ? ComponentPropsWithRef<ForwardedAsTarget<ForwardedAsTarget>> : {}>

Returns

Element

Defined in

src/component/Alert/Alert.tsx:141

▸ AlertItem(props): ReactNode

Parameters

Name Type
props Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { $backgroundColor?: string ; $isExiting?: boolean ; level: undefined | "default" | "primary" | "secondary" | "info" | "success" | "danger" | "warning" ; theme: DefaultTheme | default }>

Returns

ReactNode

Defined in

src/component/Alert/Alert.tsx:141

AlertWrap

▸ AlertWrap(«destructured»): Element

Parameters

Name Type
«destructured» AlertWrapProps

Returns

Element

Defined in

src/component/AlertWrap/AlertWrap.tsx:4

AlignBox

▸ AlignBox(«destructured»): Element

Parameters

Name Type
«destructured» AlignBoxProps

Returns

Element

Example

 <AlignBox
     align={'left'}
  >
     <div>left</div>
 </AlignBox>

Defined in

src/component/alignBox/AlignBox.tsx:30

BetweenContainer

▸ BetweenContainer(«destructured»): Element

Parameters

Name Type
«destructured» BetweenContainerProps

Returns

Element

Defined in

src/component/BetweenContainer/BetweenContainer.tsx:31

CustomTheme

▸ CustomTheme(theme): default

Parameters

Name Type
theme default

Returns

default

Defined in

src/component/StyleThemeProvider/CustomTheme.ts:4

DarkAndLightModeButton

▸ DarkAndLightModeButton(«destructured»): Element

Parameters

Name Type
«destructured» DarkAndLightModeButtonProps

Returns

Element

Defined in

src/component/DarkAndLightModeButton/DarkAndLightModeButton.tsx:42

GithubComment

▸ GithubComment(«destructured»): Element

Parameters

Name Type
«destructured» GithubCommentProps

Returns

Element

Defined in

src/component/GithubComment/GithubComment.tsx:99

GithubProfile

▸ GithubProfile(props): Element

Parameters

Name Type
props GithubProfileProps

Returns

Element

Example

	<GithubProfile
		gitPersonalAccessToken={"ghp~###"}
	/>
	</GithubProfile>

Defined in

src/component/githubProfile/GithubProfile.tsx:23

GithubReply

▸ GithubReply(«destructured»): Element

Parameters

Name Type
«destructured» GithubReplyProps

Returns

Element

Defined in

src/component/GithubReply/GithubReply.tsx:52

HeadText

▸ HeadText(«destructured»): Element

Parameters

Name Type
«destructured» HeadTextProps

Returns

Element

Defined in

src/component/utills/HeadText.tsx:20

LeftRightContainer

▸ LeftRightContainer(«destructured»): Element

Parameters

Name Type
«destructured» LeftRightLayoutProps

Returns

Element

Example

<LeftRightContainer
 ratio={0.3}
>
    <div>
        left content
    </div>
    <div>
        right content
    </div>
</LeftRightContainer>

Defined in

src/component/leftRightContainer/LeftRightContainer.tsx:42

Link

▸ Link(props): Element

Parameters

Name Type
props LinkProps

Returns

Element

Example

 <Link 
   href="https://juny.vercel.app" 
 />

Defined in

src/component/link/Link.tsx:33

List

▸ List(«destructured»): Element

Parameters

Name Type
«destructured» ListProps

Returns

Element

Defined in

src/component/list/List.tsx:41

ListItem

▸ ListItem(«destructured»): Element

Parameters

Name Type
«destructured» ListItemProps

Returns

Element

Defined in

src/component/list/List.item.tsx:28

MacContainer

▸ MacContainer(«destructured»): Element

Pasted image 20240528174307.png

Parameters

Name Type
«destructured» MacContainerProps

Returns

Element

Example

import { MacContainer } from "juny-react-style";

<MacContainer><div>children</div></MacContainer>

Defined in

src/component/macContainer/MacContainer.tsx:54

MacContainerHeader

▸ MacContainerHeader(«destructured»): Element

Parameters

Name Type
«destructured» MacContainerHeaderProps

Returns

Element

Defined in

src/component/macContainer/MacContainerHeader.tsx:44

MacMenuBar

▸ MacMenuBar(«destructured»): Element

Parameters

Name Type
«destructured» MacMenuBarProps

Returns

Element

Defined in

src/component/MacMenuBar/MacMenuBar.tsx:29

MacMenuBarItem

▸ MacMenuBarItem(«destructured»): Element

Parameters

Name Type
«destructured» MacMenuBarItemProps

Returns

Element

Defined in

src/component/MacMenuBar/MacMenuBarItem.tsx:69

MarginBox

▸ MarginBox(props): Element

Parameters

Name Type
props MarginBoxProps

Returns

Element

Example

	<MarginBox
		bottom={"1px"}
 		top={"1px"}
		right={"1px"}
		left={"1px"}
     >
		<div>foo</div>
	<MarginBox>

Defined in

src/component/marginBox/MarginBox.tsx:28

Profile

▸ Profile(props): Element

The Profile component is used to display user profile information. ProfileProps defines the properties that can be passed to the Profile component.

Parameters

Name Type Description
props ProfileProps The properties passed to the Profile component

Returns

Element

The Profile component

Defined in

src/component/profile/Profile.tsx:51

Screen

▸ Screen(«destructured»): Element

Parameters

Name Type
«destructured» ScreenProps

Returns

Element

Defined in

src/component/screen/Screen.tsx:35

SearchBar

▸ SearchBar(«destructured»): Element

Parameters

Name Type
«destructured» SearchBarProps

Returns

Element

Defined in

src/component/SearchBar/search-bar.tsx:62

SearchModal

▸ SearchModal(«destructured»): Element

Parameters

Name Type
«destructured» SearchModalProps

Returns

Element

Defined in

src/component/SearchModal/search-modal.tsx:12

Spinner

▸ Spinner(props): Element

Parameters

Name Type
props SpinnerProps

Returns

Element

	<Spinner width={"10px"} height={"10px"} />

Defined in

src/component/spinner/Spinner.tsx:35

StyleThemeContextProvider

▸ StyleThemeContextProvider(«destructured»): Element

Parameters

Name Type
«destructured» Object
› children ReactNode

Returns

Element

Defined in

src/component/StyleThemeProvider/StyleThemeContextProvider.tsx:5

StyleThemeProvider

▸ StyleThemeProvider(«destructured»): Element

Parameters

Name Type
«destructured» StyleThemeProviderProps

Returns

Element

Defined in

src/component/StyleThemeProvider/StyleThemeProvider.tsx:6

StyledAlert

▸ StyledAlert<AsTarget, ForwardedAsTarget>(props): Element

Type parameters

Name Type
AsTarget extends void | WebTarget = void
ForwardedAsTarget extends void | WebTarget = void

Parameters

Name Type
props PolymorphicComponentProps<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAlertProps>, AsTarget, ForwardedAsTarget, AsTarget extends KnownTarget ? ComponentPropsWithRef<AsTarget<AsTarget>> : {}, ForwardedAsTarget extends KnownTarget ? ComponentPropsWithRef<ForwardedAsTarget<ForwardedAsTarget>> : {}>

Returns

Element

Defined in

src/component/Alert/Alert.tsx:92

▸ StyledAlert(props): ReactNode

Parameters

Name Type
props Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAlertProps>

Returns

ReactNode

Defined in

src/component/Alert/Alert.tsx:92

TextBox

▸ TextBox<AsTarget, ForwardedAsTarget>(props): Element

Type parameters

Name Type
AsTarget extends void | WebTarget = void
ForwardedAsTarget extends void | WebTarget = void

Parameters

Name Type
props PolymorphicComponentProps<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextBoxWrapProps>, AsTarget, ForwardedAsTarget, AsTarget extends KnownTarget ? ComponentPropsWithRef<AsTarget<AsTarget>> : {}, ForwardedAsTarget extends KnownTarget ? ComponentPropsWithRef<ForwardedAsTarget<ForwardedAsTarget>> : {}>

Returns

Element

Defined in

src/component/utills/TextBox.tsx:16

▸ TextBox(props): ReactNode

Parameters

Name Type
props Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextBoxWrapProps>

Returns

ReactNode

Defined in

src/component/utills/TextBox.tsx:16

TextOverFlow

▸ TextOverFlow(props): Element

Parameters

Name Type
props TextOverFlowProps

Returns

Element

Example

 <TextOverFlow>foo</TextOverFlow>

Defined in

src/component/textOverFlow/TextOverFlow.tsx:20

TreeHeader

▸ TreeHeader<AsTarget, ForwardedAsTarget>(props): Element

Type parameters

Name Type
AsTarget extends void | WebTarget = void
ForwardedAsTarget extends void | WebTarget = void

Parameters

Name Type
props PolymorphicComponentProps<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, AsTarget, ForwardedAsTarget, AsTarget extends KnownTarget ? ComponentPropsWithRef<AsTarget<AsTarget>> : {}, ForwardedAsTarget extends KnownTarget ? ComponentPropsWithRef<ForwardedAsTarget<ForwardedAsTarget>> : {}>

Returns

Element

Defined in

src/component/TreeList/TreeList.tsx:15

▸ TreeHeader(props): ReactNode

Parameters

Name Type
props FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>

Returns

ReactNode

Defined in

src/component/TreeList/TreeList.tsx:15

TreeItem

▸ TreeItem<AsTarget, ForwardedAsTarget>(props): Element

Type parameters

Name Type
AsTarget extends void | WebTarget = void
ForwardedAsTarget extends void | WebTarget = void

Parameters

Name Type
props PolymorphicComponentProps<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TreeItemProps<{ [key: string]: any; }>>, AsTarget, ForwardedAsTarget, AsTarget extends KnownTarget ? ComponentPropsWithRef<AsTarget<AsTarget>> : {}, ForwardedAsTarget extends KnownTarget ? ComponentPropsWithRef<ForwardedAsTarget<ForwardedAsTarget>> : {}>

Returns

Element

Defined in

src/component/TreeList/TreeList.tsx:27

▸ TreeItem(props): ReactNode

Parameters

Name Type
props Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TreeItemProps<{ [key: string]: any; }>>

Returns

ReactNode

Defined in

src/component/TreeList/TreeList.tsx:27

TreeList

▸ TreeList(«destructured»): Element

Parameters

Name Type
«destructured» TreeListProps<{ [key: string]: any; }>

Returns

Element

Defined in

src/component/TreeList/TreeList.tsx:51

useTheme

▸ useTheme(): ThemeContextType

Returns

ThemeContextType

Defined in

src/component/StyleThemeProvider/useTheme.tsx:5