react-textgame-components / Exports
- GBlock
- GBlurText
- GButton
- GIcon
- GImage
- GInput
- GLink
- GMap
- GMapHotspot
- GNotificationContainer
- GP
- GProvider
- GSay
- GVideo
- useNotification
Ƭ ButtonVariants: "dark"
| "light"
| "success"
| "warning"
| "danger"
| "info"
src/components/GButton/types.ts:16
Ƭ Effect: "rightSpring"
| "leftSpring"
| "bottomSpring"
| "opacity"
src/components/GBlock/types.ts:5
Ƭ LinkVariants: "default"
| "light"
| "textLike"
src/components/GLink/types.ts:4
Ƭ SaySideVariants: "left"
| "right"
src/components/GSay/types.ts:7
Ƭ SayVariants: "common"
| "bigName"
| "messenger"
src/components/GSay/types.ts:5
• Const
GContext: Context
<IGContext
>
src/components/GContext/GContext.tsx:5
▸ GBlock(props
): Element
GBlock component is a container for content that can be shown on button click or other event
Name | Type | Description |
---|---|---|
props |
GBlockProps |
GBlockProps |
Element
GBlock component
Example
<GBlock loadOn="button" buttonName="Show more">
<div>Content</div>
</GBlock>
See
- GBlockProps
- GButton
- useIsShown
- GContext
src/components/GBlock/GBlock.tsx:25
▸ GBlurText(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
GBlurTextProps |
Element
src/components/GBlurText/GBlurText.tsx:5
▸ GButton(props
): Element
Name | Type |
---|---|
props |
GButtonProps |
Element
src/components/GButton/GButton.tsx:5
▸ GIcon(props
): Element
Name | Type |
---|---|
props |
IconInterface |
Element
src/components/GIcon/GIcon.tsx:6
▸ GImage(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
GameImageProps |
Element
src/components/GImage/GImage.tsx:9
▸ GInput(props
): Element
Name | Type |
---|---|
props |
GInputProps |
Element
src/components/GInput/GInput.tsx:11
▸ GLink(props
): Element
Name | Type |
---|---|
props |
LinkProps |
Element
src/components/GLink/GLink.tsx:23
▸ GMap(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
GMapProps |
Element
src/components/GMap/GMap.tsx:13
▸ GMapHotspot<T
>(props
): GMapHotspotType
Name | Type |
---|---|
T |
extends HotspotType |
Name | Type |
---|---|
props |
GMapHotspotProps <T > |
GMapHotspotType
src/components/GMap/GMapHotspot.tsx:6
▸ GNotificationContainer(props
): Element
GNotificationContainer component is a container for notifications
DON'T FORGET TO IMPORT CSS FILE IN YOUR APP (react-textgame-components/dist/styles.css)
Name | Type | Description |
---|---|---|
props |
ToastContainerProps |
ToastContainerProps |
Element
GNotificationContainer component
Example
<GNotificationContainer
position="top-right"
hideProgressBar={true}
theme="dark"
autoClose={5000}
/>
See
- ToastContainerProps
- GContext
- useNotification
- ToastContainer
- https://fkhadra.github.io/react-toastify/introduction/
- https://fkhadra.github.io/react-toastify/api/toastcontainer
src/components/GNotification/GNotificationContainer.tsx:29
▸ GP(props
, context?
): ReactNode
game
tag
Name | Type |
---|---|
props |
MUIStyledCommonProps <Theme > & ClassAttributes <HTMLParagraphElement > & HTMLAttributes <HTMLParagraphElement > |
context? |
any |
ReactNode
▸ GProvider(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
GProviderProps |
Element
src/components/GContext/GProvider.tsx:11
▸ GSay(props
): Element
Name | Type |
---|---|
props |
GSayProps |
Element
src/components/GSay/GSay.tsx:34
▸ GVideo(props
): Element
Name | Type |
---|---|
props |
GVideoProps |
Element
src/components/GVideo/GVideo.tsx:6
▸ useNotification(options?
): Object
Hook for showing notifications
DON'T FORGET TO IMPORT CSS FILE IN YOUR APP (react-textgame-components/dist/styles.css)
Name | Type | Description |
---|---|---|
options? |
ToastOptions <unknown > |
options for the notification |
Object
notify - function to show a notification
Name | Type |
---|---|
notify |
(content : ReactNode ) => void |
Example
const { notify } = useNotification();
notify(<div>Hello, world!</div>);
Example
const { notify } = useNotification({ autoClose: 10000 });
notify('Hello, world!');
See