{"id":"brinkokevin/react-hooks","name":"react-hooks","scope":"brinkokevin","platform":"roblox","description":"React hooks for Rodux","version":"0.3.1","latest":"0.3.1","versions":["0.3.1"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{"core-packages/react":{"version":"^17.0.1-rc.16","alias":"React"}},"integrity":"d78f4a2814afe2b7ba95fe275c72873e87ddd3a974922d1f7986a6715377ce37","likes":0,"downloads":0,"install":"forest install brinkokevin/react-hooks","url":"https://forest.dev/p/roblox/brinkokevin/react-hooks","files":"https://api.forest.dev/ai/package/roblox/brinkokevin/react-hooks/files","readme":"# rodux-hooks\r\n\r\nA very simple bridge between Roact and Rodux via [roact-hooks](https://github.com/Kampfkarren/roact-hooks), inspired by [react-redux](https://react-redux.js.org/api/hooks).\r\n\r\n# API\r\n\r\n## Provider\r\n\r\nAccesses your store via the `store` prop and makes it available to all of its children. Optionally takes a `context` prop if you're using a custom context.\r\n\r\n```lua\r\nlocal function app(props, hooks)\r\n    return e(RoduxHooks.Provider, {\r\n        store = store,\r\n    }, {\r\n        -- your app goes here\r\n    })\r\nend\r\n```\r\n\r\n## useSelector\r\n\r\nThis is the primary way to get data from a Rodux store with rodux-hooks. Multiple useSelector hooks can be used in the same component.\r\n\r\nBy default, useSelector will directly compare the previous value returned by `selector` to the most recent one. When the old and new values are not equal, the component will be re-rendered with the updated state. You can optionally pass a function to `equalityFn` for finer control over this.\r\n\r\n```lua\r\nuseSelector(\r\n    hooks: RoactHooks,\r\n    selector: (state: table),\r\n    equalityFn: ((oldState: table, newState: table) -> boolean)?\r\n) -> any\r\n```\r\n\r\n### Example\r\n\r\n```lua\r\nlocal function ExampleLabel(props, hooks)\r\n    local money = RoduxHooks.useSelector(hooks, function(state)\r\n        return state.money\r\n    end)\r\n\r\n    return e(\"TextLabel\", {\r\n        AnchorPoint = Vector2.new(0.5, 0.5),\r\n        Position = UDim2.fromScale(0.5, 0.5),\r\n        Size = UDim2.fromOffset(100, 50),\r\n        Text = \"Money: \" .. money,\r\n    })\r\nend\r\n```\r\n\r\n## useDispatch\r\n\r\nReturns the dispatch function of your Rodux store.\r\n\r\n```lua\r\nuseDispatch(hooks: RoactHooks) -> dispatch\r\n```\r\n\r\n```lua\r\nlocal function ExampleButton(props, hooks)\r\n    local dispatch = RoduxHooks.useDispatch(hooks)\r\n\r\n    return e(\"TextButton\", {\r\n        AnchorPoint = Vector2.new(0.5, 0.5),\r\n        Position = UDim2.fromScale(0.5, 0.5),\r\n        Size = UDim2.fromOffset(100, 50),\r\n        Text = \"Click me for free money!\",\r\n\r\n        [Roact.Event.Activate] = function()\r\n            dispatch({\r\n                type = \"moneyAdded\",\r\n                amount = 100,\r\n            })\r\n        end,\r\n    })\r\nend\r\n```\r\n\r\n## useStore\r\n\r\nReturns the Rodux store. You will probably rarely ever need to use this.\r\n\r\n```lua\r\nuseStore(hooks: RoactHooks) -> RoduxStore\r\n```\r\n\r\n## shallowEqual\r\n\r\nDoes a shallow comparison of two values (usually tables). This is included as a helper function to be used with useSelector.\r\n\r\n```lua\r\nshallowEqual(x: any, y: any) -> boolean\r\n```\r\n\r\n# Custom Context API\r\n\r\nThese functions are exposed in the event that you are using a custom context. You would probably only need to do this if you were using more than one store, which is generally frowned upon in Rodux.\r\n\r\n## useCustomSelector\r\n\r\nLike useSelector, but accepts a custom context.\r\n\r\n```lua\r\nuseCustomSelector(\r\n    hooks: RoactHooks,\r\n    selector: (state: table),\r\n    equalityFn: ((oldState: table, newState: table) -> boolean)?,\r\n    customContext: RoactContext\r\n) -> any\r\n```\r\n\r\n## useCustomDispatch\r\n\r\nLike useDispatch, but accepts a custom context.\r\n\r\n```lua\r\nuseCustomDispatch(\r\n    hooks: RoactHooks,\r\n    customContext: RoactContext\r\n) -> dispatch\r\n```\r\n\r\n## Example\r\n\r\n```lua\r\nlocal CustomContext = Roact.createContext()\r\n\r\nlocal function app(props, hooks)\r\n    return e(RoduxHooks.Provider, {\r\n        store = store,\r\n        context = CustomContext,\r\n    }, {\r\n        -- a bunch of components\r\n    })\r\nend\r\n\r\n-- A component that is a descendant of `app`\r\nlocal function YetAnotherExample(props, hooks)\r\n    local value = RoduxHooks.useCustomSelector(hooks, selector, equalityFn, CustomContext)\r\n    local dispatch = RoduxHooks.useCustomDispatch(hooks, CustomContext)\r\n\r\n    -- your component here\r\nend\r\n```\r\n","readmeTruncated":false}