{"id":16226478,"url":"https://github.com/thecodejack/svelte-pagination","last_synced_at":"2025-03-19T13:30:39.751Z","repository":{"id":38975634,"uuid":"282937188","full_name":"thecodejack/svelte-pagination","owner":"thecodejack","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-10T13:50:36.000Z","size":365,"stargazers_count":4,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-11T12:49:18.847Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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/thecodejack.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":"2020-07-27T15:23:08.000Z","updated_at":"2022-07-31T20:33:43.000Z","dependencies_parsed_at":"2022-07-16T10:00:54.954Z","dependency_job_id":"a054b8c2-45be-480d-a5ee-9b5cf0cf7575","html_url":"https://github.com/thecodejack/svelte-pagination","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thecodejack%2Fsvelte-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thecodejack%2Fsvelte-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thecodejack%2Fsvelte-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thecodejack%2Fsvelte-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thecodejack","download_url":"https://codeload.github.com/thecodejack/svelte-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244434686,"owners_count":20452233,"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":[],"created_at":"2024-10-10T12:49:24.469Z","updated_at":"2025-03-19T13:30:39.481Z","avatar_url":"https://github.com/thecodejack.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-pagination\r\n\r\n[![NPM](https://img.shields.io/npm/v/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)\r\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)\r\n\r\nRaw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.\r\n\r\n## Demo\r\n\r\n[Click here for Storybook link](https://svelte-pagination.netlify.app/)\r\n\r\n[REPL Link](https://svelte.dev/repl/20e93c193d6d4a9e922465f684fb1539)\r\n\r\n## Installation\r\n\r\n```\r\nnpm install svelte-pagination\r\n\r\nor\r\n\r\nyarn add svelte-pagination\r\n```\r\n\r\n## Usage\r\n\r\n```\r\n\u003cscript\u003e\r\n  import Pagination from \"svelte-pagination\";\r\n\r\n  let checkedValue = 1;\r\n\r\n  function handleChange(e) {\r\n    const { selected } = e.detail;\r\n    checkedValue = selected;\r\n  }\r\n\u003c/script\u003e\r\n\r\n\u003cPagination\r\n  pageCount={100}\r\n  marginPagesDisplayed={2}\r\n  pageRangeDisplayed={5}\r\n  on:change={handleChange} /\u003e\r\n\u003cbr /\u003e\r\n\r\n```\r\n\r\n## API\r\n\r\n### Props\r\n\r\n| Prop Name              | Description | Default Value |\r\n| ---------------------- | ----------- | ------------- |\r\n| pageCount              |             | 10            |\r\n| pageRangeDisplayed     |             | 2             |\r\n| marginPagesDisplayed   |             | 3             |\r\n| previousLabel          |             | \"Previous\"    |\r\n| nextLabel              |             | \"Next\"        |\r\n| breakLabel             |             | \"...\"         |\r\n| hrefBuilder            |             |               |\r\n| initialPage            |             |               |\r\n| forcePage              |             |               |\r\n| disableInitialCallback |             | false         |\r\n| containerClassName     |             |               |\r\n| pageClassName          |             |               |\r\n| pageLinkClassName      |             |               |\r\n| activeClassName        |             | \"selected\"    |\r\n| activeLinkClassName    |             |               |\r\n| previousClassName      |             | \"previous\"    |\r\n| nextClassName          |             | \"next\"        |\r\n| previousLinkClassName  |             |               |\r\n| nextLinkClassName      |             |               |\r\n| disabledClassName      |             | \"disabled\"    |\r\n| breakClassName         |             |               |\r\n| breakLinkClassName     |             |               |\r\n| extraAriaContext       |             |               |\r\n| ariaLabelBuilder       |             |               |\r\n| startPageIndex         |             | 1             |\r\n\r\n### Slots\r\n\r\nNA\r\n\r\n### Events\r\n\r\n| Event Name | Description | `event.detail` info        |\r\n| ---------- | ----------- | -------------------------- |\r\n| change     |             | `{event: event, selected}` |\r\n\r\n### Examples\r\n\r\n[Click here](https://github.com/thecodejack/svelte-pagination/tree/master/stories/views) to view stories implementation\r\n\r\n## Credits\r\n\r\nTBD\r\n\r\n## License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodejack%2Fsvelte-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthecodejack%2Fsvelte-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodejack%2Fsvelte-pagination/lists"}