{"id":13727289,"url":"https://github.com/pveyes/use-less","last_synced_at":"2025-07-22T15:32:53.571Z","repository":{"id":52872496,"uuid":"240322314","full_name":"pveyes/use-less","owner":"pveyes","description":"React hooks that help you do what you already did, with more indirection","archived":false,"fork":false,"pushed_at":"2022-06-01T23:26:25.000Z","size":459,"stargazers_count":149,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-01T02:17:53.051Z","etag":null,"topics":["abstraction","hooks","oss","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@pveyes/use-less","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pveyes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-13T17:38:40.000Z","updated_at":"2024-12-19T13:09:02.000Z","dependencies_parsed_at":"2022-08-23T12:51:39.088Z","dependency_job_id":null,"html_url":"https://github.com/pveyes/use-less","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/pveyes/use-less","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pveyes%2Fuse-less","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pveyes%2Fuse-less/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pveyes%2Fuse-less/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pveyes%2Fuse-less/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pveyes","download_url":"https://codeload.github.com/pveyes/use-less/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pveyes%2Fuse-less/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266520688,"owners_count":23942319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abstraction","hooks","oss","react"],"created_at":"2024-08-03T01:03:48.454Z","updated_at":"2025-07-22T15:32:53.526Z","avatar_url":"https://github.com/pveyes.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# use-less\n\nReact hooks that help you do what you already did, with more indirection\n\n**Warning: this package is ready for production use because of 1.x.x version**\n\n## Install\n\n```sh\nnpm install @pveyes/use-less\n```\n\n## APIs\n\nAll the functionalities are available inside named import. Because it's written in typescript, you can be sure these hooks are free of bugs.\n\n### `useProps`\n\nReact already provide `useState` hooks, but what if you want to use `props` instead? `use-less` provides `useProps` hooks to get your actual props:\n\n```jsx\nimport { useProps } from '@pveyes/use-less';\n\nfunction Component(props) {\n  const actualProps = useProps(props);\n  // you can finally use the actual component props\n  return \u003cdiv {...actualProps} /\u003e;\n}\n```\n\nIn cases where your props is computationally expensive, you can use lazy initializer, similar to how it works in `useState`\n\n```jsx\nimport { useProps } from '@pveyes/use-less';\n\nfunction Component(expensiveProps) {\n  const props = useProps(() =\u003e expensiveProps);\n  // you can finally use the actual component props\n  return \u003cdiv {...props} /\u003e;\n}\n```\n\n### `useConstructor`\n\nIf you don't like the way React uses [tuple](https://en.wikipedia.org/wiki/Tuple) for its state hooks and you feel like setting state on constructor is the way to go, you can use `useConstructor` hooks to do that.\n\n```jsx\nimport { useConstructor } from '@pveyes/use-less';\n\nfunction Component() {\n  // If you're feeling nostalgic, you can use Cyrillic character\n  // to name your variable `thіs` without v8 yelling at you\n  const thіs = useConstructor(function constructor() {\n    this.state = {\n      text: string;\n    }\n  });\n\n  // It feels so good to use this.state \u0026 this.setState\n  // RIGHT? RIGHT???\n  return (\n    \u003cinput\n      value={thіs.state.text}\n      onChange={e =\u003e thіs.setState({ text: '' })}\n    /\u003e\n  );\n}\n```\n\n**Yes, you need to use normal function, not arrow function.**\n\n### `useDerivedStateFromProps`\n\nMoving to React hooks means you lose one of the most powerful React API: `getDerivedStateFromProps` or `gDSFP` for short. Don't be afraid, we bring it back in `use-less` using `useDerivedStateFromProps` or `uDSFP` for short.\n\n```jsx\nimport { useDerivedStateFromProps } from '@pveyes/use-less';\n\n// if you're familiar with redux, you'll be familiar with this as well\nfunction mapPropsToState(props) {\n  return {\n    value: props.value,\n    onChange: () =\u003e void 0,\n  };\n}\n\nfunction Component(props) {\n  const state = useDerivedStateFromProps(props, mapPropsToState);\n  return \u003cinput value={state.value} onChange={state.onChange} /\u003e;\n}\n```\n\n### `useRenderProps`\n\nWith hooks, you see less and less render props pattern being used. `use-less` provides `useRenderProps` to help you cling to your old pattern:\n\n```jsx\nimport { useRenderProps } from '@pveyes/use-less';\n\nfunction Component(props) {\n  const renderProps = useRenderProps(props);\n  return renderProps(props =\u003e \u003csection {...props} /\u003e);\n}\n```\n\n### `useHOC`\n\nAnother thing that's missing since hooks era is Higher Order Component. One that was praised for being powerful is now starting to be abandoned. Fortunately, you can still use HOCs using `useHOC` hooks (no pun intended).\n\n```jsx\nimport { useHOC } from '@pveyes/use-less';\nimport withLegacy from './hoc';\n\nfunction Component(props) {\n  const renderHOC = useHOC(withLegacy);\n  return renderHOC(hocProps =\u003e \u003cdiv {...props} {...hocProps} /\u003e);\n}\n```\n\nThis is even better than just using HOC, there's no more props naming conflict! This is the power of composition between hooks, HOC and render props!\n\n### `useGlobalContext`\n\nThe main issue with React Context is you can only get value that the Provider gives you, or its default value. What if you want to access global value? With the rise of SSR, you need to be sure you call correct global `console` in both server and browser. With `useGlobalContext` you can access all global variable that exists in both environment.\n\nIt works in SSR and browser without any configuration!\n\n```jsx\nimport { useGlobalContext } from '@pveyes/use-less';\n\nfunction Component(props) {\n  const { console } = useGlobalContext();\n  console.log('It works!');\n  return null;\n}\n```\n\n## FAQ\n\n- **Does it work with concurrent mode**\n\n  Yes, all this hooks should work in concurrent mode. Our example uses `React.StrictMode` to make sure it works with future version of React.\n\n- **Can I really use this in production?**\n\n  Yes, version 1.x.x means it's already stable and ready to use in production\n\n- **Why is it `@pveyes/use-less` and not `use-less`?**\n\n  Because there's already `useless` npm package, and npm doesn't allow package using similar name with existing package. If you want to donate the package name, I'll be happy.\n\n- **Is this a joke?**\n\n  What do you think?\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpveyes%2Fuse-less","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpveyes%2Fuse-less","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpveyes%2Fuse-less/lists"}