\r\n \r\n\r\n## Intro to hooks\r\nFor the constructor, you should pass in the Roact you are using, since can't combine multiple versions of Roact together.\r\n\r\nReturns a function that can be used to create a new Roact component with hooks. An optional object can be passed in. The following are the valid keys that can be used, and what they do.\r\n\r\n#### `name`\r\nRefers to the name used in debugging. If it is not passed, it'll use the function name of what was passed in.\r\n\r\n#### `componentType`\r\nDefines if the component will be either a `Component` or a `PureComponent`.\r\n\r\n#### `validateProps`\r\nProvides a mechanism for verifying inputs passed into the component.\r\n\r\n### Example\r\n`ClickCounter.tsx`\r\n```tsx\r\nimport Roact from \"@rbxts/roact\";\r\nimport Hooks from \"@rbxts/roact-hooks\";\r\n\r\nconst ClickCounter: Hooks.FC = (_props, { useState }) => {\r\n\tconst [counter, setCounter] = useState(0);\r\n\r\n\treturn (\r\n\t\t setCounter(counter + 1) }}\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nexport = new Hooks(Roact)(ClickCounter);\r\n```\r\n\r\n### Props & Default Props Example\r\n`PrintsOnClick.tsx`\r\n```tsx\r\ninterface Props {\r\n\tbuttonText: string;\r\n\tprintMessage: string;\r\n}\r\n\r\nconst PrintsOnClick: Hooks.FC = (props, { useCallback }) => {\r\n\tconst doPrint = useCallback(() => {\r\n\t\tprint(props.printMessage);\r\n\t});\r\n\r\n\treturn (\r\n\t\t doPrint() }}\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nexport = new Hooks(Roact)(PrintsOnClick, {\r\n\tdefaultProps: {\r\n\t\tbuttonText: \"Click me...\",\r\n\t\tprintMessage: \"it was clicked!\"\r\n\t}\r\n});\r\n```\r\n\r\n### Reducer Example\r\nAn alternative to `useState` that uses a reducer rather than state directly. If you’re familiar with Rodux, you already know how this works.\r\n\r\n`Stepper.tsx`\r\n```tsx\r\ninterface State {\r\n\tcount: number;\r\n}\r\n\r\nconst enum Actions {\r\n INCREMENT = \"increment\",\r\n DECREMENT = \"decrement\",\r\n}\r\n\r\nconst initialState: State = {\r\n count: 0,\r\n};\r\n\r\nconst reducer: Hooks.Reducer> = (state, action) => {\r\n switch(action.type) {\r\n case Actions.INCREMENT:\r\n return {\r\n count: state.count + 1,\r\n };\r\n case Actions.DECREMENT:\r\n return {\r\n count: state.count - 1,\r\n };\r\n }\r\n};\r\n\r\nconst Stepper: Hooks.FC = (_props, { useReducer }) => {\r\n const [state, dispatch] = useReducer(reducer, initialState);\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n dispatch({\r\n type: Actions.INCREMENT,\r\n })\r\n }\r\n }}\r\n />\r\n {\r\n dispatch({\r\n type: Actions.DECREMENT,\r\n })\r\n }\r\n }}\r\n />\r\n \r\n );\r\n};\r\n\r\nexport = new Hooks(Roact)(Stepper);\r\n```\r\n\r\n## Creating a hook\r\nTo create a custom hook all you need to do is to create a function, with its name starting with `use`.\r\nIt may as well call other hooks.\r\n\r\n### Example\r\n`hooks.ts`\r\n```ts\r\nimport ChatAPI, { Status } from \"Server/ChatAPI\";\r\n\r\nexport const useFriendStatus = (\r\n friendID: number,\r\n { useState, useEffect }: CoreHooks\r\n) => {\r\n const [isOnline, setIsOnline] = useState(false);\r\n\r\n useEffect(() => {\r\n const handleStatusChange = (status: Status) => {\r\n setIsOnline(status.isOnline);\r\n }\r\n\r\n ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\r\n return () => {\r\n ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\r\n };\r\n });\r\n\r\n return isOnline;\r\n};\r\n```\r\n\r\n`FriendListItem.tsx`\r\n```tsx\r\nimport { useFriendStatus } from \"./hooks.ts\";\r\n\r\nexport interface FriendListItemProps {\r\n name: string;\r\n id: number;\r\n}\r\n\r\nconst FriendListItem: Hooks.FC = (props, hooks) => {\r\n const isOnline = useFriendStatus(props.id, hooks);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default new Hooks(Roact)(FriendListItem);\r\n```\r\n\r\nTo get more in depth on how this works, check the [original library's repository](https://github.com/Kampfkarren/roact-hooks#readme).\r\n\r\n## Extra\r\n### Using a default property\r\nThe `defaultProps` property is intentionally excluded from the `Hooks` class because TypeScript already have a shorthand syntax for assigning default properties. This can be achieved by destructuring your `props` object and using `=` to assign a default value to the chosen property.\r\n\r\n```tsx\r\ninterface Props {\r\n hello: string;\r\n world?: string;\r\n}\r\n\r\nconst HelloWorld: Hooks.FC = (({ hello, world = \", World!\" }, hooks) => {\r\n return \r\n});\r\n\r\nexport = new Hooks(Roact)(HelloWorld);\r\n\r\n // Text will be \"Hello, World!\"\r\n```\r\n\r\n### Re-using a hooked component factory\r\nThe `Hooks` class doesn't necessarily need to be created for each new component, instead it can be stored in a variable and exported to be used by the components.\r\n\r\n```js\r\nexport const hooks = new Hooks(Roact);\r\n```\r\n\r\n```tsx\r\n// Some of the ViewportFrame props\r\ninterface ComponentProps {\r\n ImageTransparency?: number;\r\n LightDirection?: Vector3;\r\n}\r\n\r\nexport const Viewport = hooks((props: ComponentProps, hooks) => {\r\n return ;\r\n});\r\n\r\n// Or:\r\nexport const Viewport2 = hooks((props, hooks) => {\r\n\treturn ;\r\n});\r\n```\r\n\r\n## License\r\nThis library is licensed under the [MPL-2.0 License](LICENSE.md). The original Roact-Hooks library's License can be found [here](https://github.com/Kampfkarren/roact-hooks/blob/main/LICENSE.md).","readmeFilename":"README.md","homepage":"https://github.com/HylianBasement/rbx-roact-hooks#readme","repository":{"type":"git","url":"git+https://github.com/HylianBasement/rbx-roact-hooks.git"},"bugs":{"url":"https://github.com/HylianBasement/rbx-roact-hooks/issues"}}
![](\"https://i.imgur.com/HkrF8kt.png\"/)
![\"roblox-ts\"](\"https://img.shields.io/badge/github-roblox_typescript-red.svg\"){kind=icon}
\r\n\t\r\n\t\r\n\t\t![](\"https://badge.fury.io/js/%40rbxts%2Froact-hooks.svg\"){kind=icon}
\r\n\t\r\n