{"id":19084703,"url":"https://github.com/wutility/split-views","last_synced_at":"2025-04-30T09:26:00.897Z","repository":{"id":55664592,"uuid":"203475655","full_name":"wutility/split-views","owner":"wutility","description":"✂ Simple and lightweight utility for resizable split views. \u003c1kb with 0 dependencies ➗","archived":false,"fork":false,"pushed_at":"2022-04-16T07:28:11.000Z","size":179,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T14:51:11.786Z","etag":null,"topics":["flex-box","hacktoberfest","resize","resize-pane","resizer","split-view","split-views"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/split-views-mli19","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wutility.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-21T00:33:41.000Z","updated_at":"2024-07-07T07:53:05.000Z","dependencies_parsed_at":"2022-08-15T06:00:18.038Z","dependency_job_id":null,"html_url":"https://github.com/wutility/split-views","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/wutility%2Fsplit-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutility%2Fsplit-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutility%2Fsplit-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wutility%2Fsplit-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wutility","download_url":"https://codeload.github.com/wutility/split-views/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251675746,"owners_count":21625882,"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":["flex-box","hacktoberfest","resize","resize-pane","resizer","split-view","split-views"],"created_at":"2024-11-09T02:52:20.573Z","updated_at":"2025-04-30T09:26:00.842Z","avatar_url":"https://github.com/wutility.png","language":"TypeScript","readme":"# ✂ SplitViews  \n**Utility for resizable split views.**\n\n- Fast \u0026 Simple to use.\n- Lightweight \u003c1kb.\n- Zero dependencies.\n- No events listeners are attached to Window.\n- Compatible: Firefox - Chrome - Safari - Opera - Android - (FlexBox is not supported in IE).\n\n\u003cdiv align=\"center\" style=\"width:100%; text-align:center; margin-bottom:20px;\"\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/minzip/split-views\" alt=\"split-views\" /\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/split-views\" alt=\"split-views\" /\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/split-views\" alt=\"split-views\" /\u003e\n  \u003cimg src=\"https://badgen.net/npm/dt/split-views\" alt=\"split-views\" /\u003e\n  \u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/split-views/badge\" alt=\"split-views\"/\u003e\n\u003c/div\u003e  \n\n![Split views](https://i.ibb.co/0h4gVd5/split-views.gif)\n\n\u003chr /\u003e  \n\n### [Demo](https://wutility.github.io/split-views)\n\n```bash\n$ npm i split-views\n# or\n$ yarn add split-views\n```\n\n## Usage\n```js\nimport SplitViews from 'split-views';\n```\n\nOr include it via jsDelivr CDN (UMD):\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/split-views/build/index.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Or via unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/split-views\"\u003e\u003c/script\u003e\n\u003c!-- Access via global object : window.SplitViews --\u003e\n```\n\n## Documentation\n\n- **SplitViews(options: Object): Object**  \n\n| Options      | Type                          | Default        | Description                                 |\n| ------------ | ----------------------------- | -------------- | ------------------------------------------- |\n| `parent`     | `HTMLElement` or `String`  | `'.split-view'` | Parent element.                             |\n| `sizes`      | `Array\u003cNumber\u003e`               | `[]`           | Initial sizes of each element in %.         |\n| `minSize`    | `Number`                      | `0`           | Minimum size.                               |\n| `gutterSize` | `Number`                      | `5`            | Gutter size (seperator).                    |\n| `direction`  | `String`                      | `'horizontal'`   | Resize direction: horizontal or vertical. |\n| `onDragEnd`  | `Method`                      | `null`        | Callback with new sizes in %.               |\n\n## Methods \u0026 Examples\n```js\nconst options = {\n  parent: '#parent-id', // or HTMLElement\n  direction: 'horizontal',\n  gutterSize: 5,\n  minSize: 20,\n  sizes: [25, 50, 25],\n  onDragEnd: (newSizes) =\u003e {\n    console.log(newSizes);\n  }\n};\n\nconst sp = SplitViews(options)\n\n// detroy method: remove \"touchstart\" and \"mousedown\" events\n// the others events are removed by default\nsp.detroy() \n```\n\n# Related\n- [React](https://github.com/haikelfazzani/react-split-views): React component wrapper\n\n## Notes\n- Tested on Chrome 67, Firefox 67, Edge 70, Opera 67, Safari 11, Android (\u003e= 4).\n- SplitViews is flex-based.\n- All pull requests are welcome, feel free.\n\n## Author\n- [Haikel Fazzani](https://github.com/haikelfazzani)\n\n## License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwutility%2Fsplit-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwutility%2Fsplit-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwutility%2Fsplit-views/lists"}