{"id":"rusty483/react-responsive","name":"react-responsive","scope":"rusty483","platform":"roblox","description":"Mirrored from the Wally registry.","version":"0.1.1","latest":"0.1.1","versions":["0.1.0","0.1.1"],"license":"MIT","licenseRating":"safe","licenseCaveats":["License identified from the packaged LICENSE file; the manifest declared none."],"licenseVerified":true,"dependencies":{"jsdotlua/react":{"version":"^17.0.0","alias":"React"},"jsdotlua/react-roblox":{"version":"^17.0.0","alias":"ReactRoblox"},"csqrl/sift":{"version":"^0.0.8","alias":"Sift"}},"integrity":"bdf07a9ba38156c02dea317bd918199ed0ef07ecafbcdccc12bfbd19f853542b","likes":0,"downloads":0,"install":"forest install rusty483/react-responsive","url":"https://forest.dev/p/roblox/rusty483/react-responsive","files":"https://api.forest.dev/ai/package/roblox/rusty483/react-responsive/files","readme":"<h1 align=\"center\">react-responsive</h1>\n<h3 align=\"center\">A responsive utility toolkit for React Lua</h3>\n\n## Installation\n\n### Wally\n\n```\nReactResponsive = \"flipbook-labs/react-responsive@<version>\n```\n\n## Usage\n\n### ScreenProvider\n\nShould be created at the root of your App\n\n```lua\nlocal React = require(React)\nlocal e = React.createElement\n\nlocal ReactResponsive = require(ReactResponsive)\nlocal ScreenProvider = ReactResponsive.ScreenProvider\n\nlocal function App()\n    local children = {}\n\n    return e(ScreenProvider, {\n        --[[\n        baseFontSize: number?,\n        baseScreenSize: Vector2?,\n        breakpoints: { Breakpoint }?,\n            How often you want rem, and the current breakpoint\n            to update.\n        updateInterval: number?,\n        ]]\n    }, children)\nend\n```\n\n### useRem\n\n```lua\nlocal React = require(React)\nlocal e = React.createElement\n\nlocal ReactResponsive = require(ReactResponsive)\nlocal useRem = ReactResponsive.useRem\n\nlocal function MyComponent()\n    local rem = useRem()\n\n    return e(\"Frame\", {\n        Size = UDim2.fromOffset(rem(10), rem(10))\n    })\nend\n```\n\n### useMediaQuery\n\n```lua\nlocal React = require(React)\nlocal e = React.createElement\n\nlocal ReactResponsive = require(ReactResponsive)\nlocal useMediaQuery = ReactResponsive.useMediaQuery\n\nlocal function MyComponent()\n    local showSideNav = useMediaQuery({\n        minBreakpoint = \"sm\",\n        maxBreakpoint = \"lg\"\n    })\n\n    return showSideNav and e(SideNav) or e(TopNav)\nend\n```\n\n### useBreakpointValue\n\n```lua\nlocal React = require(React)\nlocal e = React.createElement\n\nlocal ReactResponsive = require(ReactResponsive)\nlocal useBreakpointValue = ReactResponsive.useBreakpointValue\n\nlocal function MyComponent()\n    local text = useBreakpointValue({\n        lg = \"I am a large breakpoint text label\",\n        xl = \"I am an extra large breakpoint text label\",\n        base = \"I am a text label for any breakpoint smaller than large.\"\n    })\n\n    return e(\"TextLabel\", {\n        Text = text,\n    })\nend\n```\n","readmeTruncated":false}