{"id":19388496,"url":"https://github.com/vuldin/readmore","last_synced_at":"2026-05-08T03:32:10.586Z","repository":{"id":146506995,"uuid":"96598421","full_name":"vuldin/readmore","owner":"vuldin","description":"render new content in a react component on button click","archived":false,"fork":false,"pushed_at":"2017-07-08T05:35:14.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-07T08:47:29.603Z","etag":null,"topics":["cms","component","next","react","spa"],"latest_commit_sha":null,"homepage":null,"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/vuldin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-08T05:34:55.000Z","updated_at":"2017-07-08T05:38:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"c27f8ae9-5a01-45a6-8cd9-b4a7e8f8b63c","html_url":"https://github.com/vuldin/readmore","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/vuldin%2Freadmore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuldin%2Freadmore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuldin%2Freadmore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuldin%2Freadmore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuldin","download_url":"https://codeload.github.com/vuldin/readmore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240549434,"owners_count":19819131,"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":["cms","component","next","react","spa"],"created_at":"2024-11-10T10:12:50.034Z","updated_at":"2026-05-08T03:32:05.560Z","avatar_url":"https://github.com/vuldin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-readmore\nThis react component renders additional components onto the page through a button click.\nImagine a blog/news site that shows an initial set of articles.\nA link at the bottom of the page allows the viewers to render the next article set without page reload.\n\n## Improvements\nA more complete example would include a function that fetches posts (i.e. `getPosts(page)`).\nThe `page` variable would be used to fetch posts for the correct page.\n`getPosts` would be called from the function `draw`, and the result would be a posts array.\nThis array would be sent to the `getNewContent` function (in place of the `nextRef` variable).\n`getNewContent` would then create components based on these posts.\n\nAnother consideration is how to determine the number of ref components to create.\nIn this example, two variables are related to this feature:\n1. `count` (type: number): the number of ref components to create\n2. `createRefComponents` (type: function): creates an array of ref components.\n\nReact requires refs to be created inside the `render` function (see [this link](https://fb.me/react-refs-must-have-owner) for details).\nThis example creates the number of ref components needed to handle the amount of content we need to render during the initial `render` call.\nSo if your content is in the form of posts for a blog/news site, then you must:\n1. determine the total number of posts, then\n2. divde by the set you wish to render at each button click\n\nThis example implements button elements with functions tied to the onclick event.\nAdditional buttons are rendered along with new sets of content (i.e. posts) within the `getNewContent` function).\nThe previous buttons are hidden in a forEach loop, but really the only element that needs to be hidden is the last button.\nThe `forEach` function could be removed... in it's place the last button in the DOM could be set to `display:none;'`.\n\n## Run\n```bash\nnpm i\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuldin%2Freadmore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuldin%2Freadmore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuldin%2Freadmore/lists"}