{"id":19174419,"url":"https://github.com/jaredlunde/render-props","last_synced_at":"2025-05-07T18:20:39.284Z","repository":{"id":57138861,"uuid":"120269787","full_name":"jaredLunde/render-props","owner":"jaredLunde","description":"㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern","archived":false,"fork":false,"pushed_at":"2019-04-06T18:11:37.000Z","size":891,"stargazers_count":34,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-29T10:02:14.240Z","etag":null,"topics":["debounce","dom","function-as-child","mouse-events","paragraph","react","render-props","scrolling","state-container","viewport"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jaredLunde.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-02-05T07:27:16.000Z","updated_at":"2023-03-11T08:51:01.000Z","dependencies_parsed_at":"2022-09-03T17:31:11.516Z","dependency_job_id":null,"html_url":"https://github.com/jaredLunde/render-props","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Frender-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Frender-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Frender-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Frender-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredLunde","download_url":"https://codeload.github.com/jaredLunde/render-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931804,"owners_count":21827169,"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","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":["debounce","dom","function-as-child","mouse-events","paragraph","react","render-props","scrolling","state-container","viewport"],"created_at":"2024-11-09T10:17:45.086Z","updated_at":"2025-05-07T18:20:39.261Z","avatar_url":"https://github.com/jaredLunde.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=center\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003cimg src='assets/logo.png'/\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n\u003c/p\u003e\n\n______\n\nEasy-to-use render props (function as child) components for common needs\n\nhttps://www.npmjs.com/org/render-props\n\n## Packages\n\n### Contents\n- [**General Purpose**](#general-purpose)\n- [**Throttling State**](#throttling-state)\n- [**DOM**](#dom)\n  - [**Mouse Events**](#mouse-events)\n  - [**Sizing**](#sizing)\n  - [**Scrolling + Window**](#scrolling--window)\n  - [**Styles**](#styles)\n- [**Utils**](#utils)\n\n______\n\n### General Purpose\n\n______\n\n**Value** [**`@render-props/value`**](./packages/value)\n\nA component with an interface for setting, clearing and resetting values\nin a controlled or uncontrolled setting.\n\n\n**Toggle** [**`@render-props/toggle`**](./packages/toggle)\n\nA component with an interface for toggling values between on/off states\nin a controlled or uncontrolled setting.\n\n\n**Events** [**`@render-props/events`**](./packages/events)\n\nA component with an interface for managing events registered by its child\ncomponents. This component will automatically 'garbage collect' listeners when it\nunmounts.\n\n\n**Counter** [**`@render-props/counter`**](./packages/counter)\n\nA component with an interface for bound-value counting.\n\n\n**Point** [**`@render-props/point`**](./packages/point)\n\nA component with an interface for setting and moving coordinate `{x, y}`\nvalues.\n\n\n**Items** [**`@render-props/items`**](./packages/items)\n\nComponents called `Items` and `ItemSet` with an interface for adding and\nremoving items from arrays and sets while maintaining immutability on those\narrays and sets, allowing for strict-comparison in child components.\n\n\n**Choices** [**`@render-props/choices`**](./packages/choices)\n\nComponents that provides an interface for making selections from\na group of choices. The `Choices` component itself is a context provider which\ncan be used with the `Choice` and `ChoicesConsumer` components for deep-tree\nselections. It does not have to be used with these components, however.\n\n\n**Subscriptions** [**`@render-props/subscriptions`**](./packages/subscriptions)\n\nA component for communicating changes to the state of one component to\nanother component(s). This was much more useful before the React.createContext\nAPI in React 16.3 for ensuring context updates reached their consumers.\n\n\n**Paragraphs** [**`@render-props/paragraphs`**](./packages/paragraphs)\n\nA component an interface for creating paragraphs with line breaks from\nraw text with `\\n` new lines.\n\n_____\n\n### Throttling State\n\n_____\n\n**Throttle** [**`@render-props/throttle`**](./packages/throttle)\n\nA component for throttling state changes with requestAnimationFrame\n\n\n**Debounce** [**`@render-props/debounce`**](./packages/debounce)\n\nA component for debouncing state changes with lodash's debounce function\n\n_____\n\n### DOM\n\n_____\n\n#### Mouse Events\n_____\n\n**Click** [**`@render-props/click`**](./packages/click)\n\nA component with an interface for targeting specific types of click events\n(e.g. double-click) and extracting rich stats about click position within the\nclient, window, etc. making it perfect for UX analytics work and in-browser\ngaming.\n\n\n**Hover** [**`@render-props/hover`**](./packages/hover)\n\nA component with an interface for listening to hover events on child\ncomponents. The state of this component will only update if the device being\nused supports hover according to `!(window.matchMedia('(hover: none)').matches)`\n\n\n**MousePosition** [**`@render-props/mouse-position`**](./packages/mouse-position)\n\nA component with a performant interface for tracking\nthe position of the mouse as it moves around the screen - perfect for UX\nanalytic tracking and also in-browser gaming.\n\n_____\n\n#### Sizing\n\n_____\n\n**Rect** [**`@render-props/rect`**](./packages/rect)\n\nA component with an interface for retrieving the `DOMRect` of an element.\n\n\n**SizeObserver** [**`@render-props/size-observer`**](./packages/size-observer)\n\nA component with an interface for constantly querying for\nchanges to the size of the referenced element in its child function.\n\n\n**ImageProps** [**`@render-props/image-props`**](./packages/image-props)\n\nA component with an interface for getting the natural size,\nrendered size and orientation from `\u003cimg\u003e` elements after they have loaded\nsuccessfully.\n\n_____\n\n#### Scrolling + Window\n\n_____\n\n**Viewport** [**`@render-props/viewport`**](./packages/viewport)\n\nMultiple components for listening and responding to viewport events in a\nscalable fashion.\n\n\n**Scrollable** [**`@render-props/scrollable`**](./packages/scrollable)\n\nA component with an interface for listening to the scroll\nevent of its child component and providing valuable data about direction, distance,\nand more. It also provides convenience functions for scrollTo with optional animation.\n\n_____\n\n#### Styles\n\n_____\n\n**WillChange** [**`@render-props/will-change`**](./packages/will-change)\n\nA component with an interface for applying CSS `will-change`\nstyles to its child components when given events fire. This is incredibly useful\nbecause browsers recommend that you use this CSS property sparingly, as it's\na GPU-hog. You should really only be applying it *directly before* the event\noccurs.\n\n_____\n\n#### Utils\n\n_____\n\n**compose** [**`@render-props/compose`**](./packages/compose)\n\nA utility for flattening nested render props component calls safely and\nin a way that doesn't take a huge performance hit.\n```js\nimport compose from '@render-props/compose'\nimport Toggle from '@render-props/toggle'\nimport Counter from '@render-props/counter'\n\nconst Composed = compose({\n  toggle: Toggle,\n  counter: Counter\n})\n\n\u003cComposed toggle={propsPassedToToggle} counter={propsPassedToCounter}\u003e\n  {function ({toggle, counter}) {\n    // toggle = render props returned by the Toggle component\n    // counter = render props returned by the Counter component\n  }}\n\u003c/Composed\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredlunde%2Frender-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredlunde%2Frender-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredlunde%2Frender-props/lists"}