, ) res.end('' + html) ``` -------------------------------- ### Basic Usage of useScale Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/hooks/use-scale.mdx This example demonstrates how to use the `useScale` hook within a component to access the `SCALES` object and apply dynamic width scaling. The `withScale` HOC is used to wrap the component, enabling it to accept scale-related props. ```APIDOC ## Basic Usage of useScale ### Description This example demonstrates how to use the `useScale` hook within a component to access the `SCALES` object and apply dynamic width scaling. The `withScale` HOC is used to wrap the component, enabling it to accept scale-related props. ### Component Definition ```tsx import { withScale, useScale } from '@geist-ui/core' const MyComponent = () => { const { SCALES } = useScale() return

Scale Component

} export default withScale(MyComponent) ``` ### Usage Example ```tsx ``` ``` -------------------------------- ### Display with Shell Snippet Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/display.mdx Showcase shell commands using the Snippet component within a Display. This is useful for providing installation or execution instructions. ```jsx yarn add @geist-ui/core ``` -------------------------------- ### Global Keyboard Event Listener Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/hooks/use-keyboard.mdx Listen for global keyboard events. This example shows how to trigger an alert when Ctrl+S (or Cmd+S) is pressed. ```jsx () => { useKeyboard( () => alert('save success!'), [KeyCode.KEY_S, KeyMod.CtrlCmd] ) return

Press S to save.

} ``` -------------------------------- ### Select with Adaptive Width Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/select.mdx Demonstrates how to control the width of the Select component. The first example shows truncation for overly long strings, while the second disables autoscaling to allow options to determine the width. ```jsx <> ``` -------------------------------- ### Table with Action Buttons (Update) Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/table.mdx Shows how to implement an 'Update' action within a table row using custom rendering. This example modifies a specific row's data when the button is clicked, demonstrating dynamic data updates. ```jsx () => { const dataSource = [ { property: 'type', description: 'Content type', operation: '' }, { property: 'Component', description: 'DOM element to use', operation: '' }, { property: bold, description: 'Bold style', operation: '' }, ] const [data, setData] = React.useState(dataSource) const renderAction = (value, rowData, rowIndex) => { const updateHandler = () => { setData(last => { return last.map((item, dataIndex) => { if (dataIndex !== rowIndex) return item return { ...item, property: Math.random().toString(16).slice(-5) } }) }) } return ( ) } return ( setData(value)}>

) } ``` -------------------------------- ### Composing Text Components Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/text.mdx Effectively stack multiple `Text` components to create complex text layouts. This example demonstrates combining paragraph and small text with different styles. ```jsx <> Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions. Indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “Save As” dialog. ``` -------------------------------- ### Handling Unconventional Defaults with useScale Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/hooks/use-scale.mdx This example shows how to configure `useScale` to handle unconventional default values like 'auto'. When the initial value is a special character, the component won't scale by a factor, but user-defined values can still override it. ```APIDOC ## Handling Unconventional Defaults with useScale ### Description This example shows how to configure `useScale` to handle unconventional default values like 'auto'. When the initial value is a special character, the component won't scale by a factor, but user-defined values can still override it. ### Component Definition ```tsx import { withScale, useScale } from '@geist-ui/core' const MyComponent = () => { const { SCALES } = useScale() return

Fixed Component

} export default withScale(MyComponent) ``` ### Usage Example (No Scaling) ```tsx // -> The width is still "auto" // -> "auto" cannot be calculated mathematically ``` ### Usage Example (Override) ```tsx // -> The width is "100px" ``` ``` -------------------------------- ### Basic Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/hooks/use-media-query.mdx Demonstrates how to use the `useMediaQuery` hook to check for different screen size breakpoints like 'xs', 'sm', 'md', 'lg', and 'xl'. ```APIDOC ## Basic Usage This example shows how to use the `useMediaQuery` hook to detect the current screen size. ```jsx import { useMediaQuery, Code } from '@geist-ui/core' const MyComponent = () => { const isXS = useMediaQuery('xs') const isSM = useMediaQuery('sm') const isMD = useMediaQuery('md') const isLG = useMediaQuery('lg') const isXL = useMediaQuery('xl') return ( <> MediaQuery match: {isXS && 'xs'}{isSM && 'sm'}{isMD && 'md'}{isLG && 'lg'}{isXL && 'xl'}. ) } ``` ``` -------------------------------- ### Get Input Change Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/input.mdx Captures and logs input changes using the 'onChange' event handler. ```jsx () => { const [value, setValue] = React.useState() const handler = (e) => { setValue(e.target.value) console.log(e.target.value) } return ( ) } ``` -------------------------------- ### Basic Drawer Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/drawer.mdx Demonstrates the basic implementation of a Drawer. Use the `visible` prop to control its open/closed state and `onClose` to handle closing events. ```jsx () => { const [state, setState] = React.useState(false) return (

setState(false)} placement="right"> Drawer This is a drawer

Some content contained within the drawer.

) } ``` -------------------------------- ### Creating a Custom Theme from Scratch Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/guide/themes.mdx Use `Themes.create` to build a new theme object from an existing base theme object. This allows for extensive customization. ```jsx const myBaseTheme = { ... } const myTheme2 = Themes.create(myBaseTheme, { type: 'myTheme2', palette: { success: '#000', }, }) ``` -------------------------------- ### Basic Toggle Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/toggle.mdx Demonstrates the basic usage of the Toggle component, including its initial state. ```APIDOC ## Basic Toggle Usage ### Description Displays a boolean value. ### Component ```jsx ``` ``` -------------------------------- ### Basic Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/file-tree.mdx Demonstrates the basic usage of the Tree component, where folders and files are sorted automatically. ```APIDOC ## Tree ### Description Display a list of files and folders in a hierarchical tree structure. ### Usage ```jsx ``` ``` -------------------------------- ### Card with Divider Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/card.mdx A card structured with dividers to separate distinct content sections. Useful for detailed information or step-by-step guides. ```jsx Description The Object constructor creates an object wrapper for the given value. When called in a non-constructor context, Object behaves identically to new Object(). ``` -------------------------------- ### Basic Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/hooks/use-toast.mdx Demonstrates how to use the `useToasts` hook to display a simple toast message with text and a delay. ```APIDOC ## Basic Usage This example shows the fundamental use of the `useToasts` hook to display a toast message. ### Method `useToasts` hook ### Usage ```javascript const { setToast } = useToasts() const click = () => setToast({ text: 'HTTP is stateless, but not sessionless.', delay: 2000 }) ``` ``` -------------------------------- ### Basic Button Dropdown Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/button-dropdown.mdx Demonstrates the basic usage of the ButtonDropdown component. Ensure necessary imports are included. ```jsx import { ButtonDropdown, Spacer } from 'components' import { Playground, Attributes, Layout } from 'lib/components' import Plus from '@geist-ui/icons/plus' export const meta = { title: 'Button Dropdown', group: 'Navigation', index: 101, } export default () => ( Item 1 Item 2 Item 3 ) ``` -------------------------------- ### Creating a Custom Theme from Light Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/guide/themes.mdx Use `Themes.createFromLight` to fork a new theme based on the default light theme. You can then modify properties like `palette.success`. ```jsx import { CssBaseline, GeistProvider, Themes } from '@geist-ui/core' const myTheme1 = Themes.createFromLight({ type: 'coolTheme', palette: { success: '#000', }, }) const App = () => ( ) ``` -------------------------------- ### Input Sizes Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/input.mdx Demonstrates different input sizes using the 'scale' prop. ```jsx <> ``` -------------------------------- ### Responsive Grid Layout Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/grid.mdx Shows how to use different Grid item sizes for different screen widths (xs, md). ```jsx ``` -------------------------------- ### Basic Page Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/page.mdx Demonstrates how to use the Page component to display general content. The content is centered by default. Use the MockPage to control visibility and onClose to handle closing the page. ```jsx () => { const Child = () => ( <>

Hello, Everyone.

This is a simulated page, you can click anywhere to close it.

) const [visible, setVisible] = React.useState(false) return ( <> setVisible(false)}> ) } ``` -------------------------------- ### Basic Select Usage Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/components/select.mdx Demonstrates the basic functionality of the Select component with a placeholder and an onChange handler. ```jsx () => { const handler = val => console.log(val) return ( ) } ``` -------------------------------- ### Define Custom Scaling Unit for Multiple Components with GeistProvider Source: https://github.com/geist-org/geist-ui/blob/master/pages/en-us/guide/scale.mdx Demonstrates how to set a custom scaling unit for multiple components by creating a theme and wrapping them in `GeistProvider`. This ensures consistent scaling across a scope. ```jsx // NAME: src/app.jsx const themeType = 'myTheme' const customUnitTheme = Themes.createFromLight({ type: themeType, layout: { unit: '20px', }, }) const App = () => ( setState(false)} placement={placement}> Drawer This is a drawer

Some content contained within the drawer.