{"id":22382534,"url":"https://github.com/jcoreio/react-view-slider","last_synced_at":"2025-07-31T03:31:57.571Z","repository":{"id":22177309,"uuid":"95510838","full_name":"jcoreio/react-view-slider","owner":"jcoreio","description":"horizontal slide transitions between components","archived":false,"fork":false,"pushed_at":"2024-04-11T14:50:45.000Z","size":3027,"stargazers_count":26,"open_issues_count":33,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T09:57:46.929Z","etag":null,"topics":["es2015","react","skeleton"],"latest_commit_sha":null,"homepage":"https://jcoreio.github.io/react-view-slider/index.html","language":"JavaScript","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/jcoreio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-27T02:49:51.000Z","updated_at":"2024-06-18T20:07:18.557Z","dependencies_parsed_at":"2024-06-18T20:07:02.454Z","dependency_job_id":"30002025-5393-4a8a-85c5-a767852ffcc3","html_url":"https://github.com/jcoreio/react-view-slider","commit_stats":{"total_commits":320,"total_committers":4,"mean_commits":80.0,"dds":"0.24062499999999998","last_synced_commit":"41b35c68a4305df8587b23ff58cc73479eec8419"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-view-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-view-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-view-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-view-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-view-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228209939,"owners_count":17885595,"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":["es2015","react","skeleton"],"created_at":"2024-12-05T00:13:22.849Z","updated_at":"2024-12-05T00:13:23.552Z","avatar_url":"https://github.com/jcoreio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-view-slider\n\n[![CircleCI](https://circleci.com/gh/jcoreio/react-view-slider.svg?style=svg)](https://circleci.com/gh/jcoreio/react-view-slider)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-view-slider)](https://codecov.io/gh/jcoreio/react-view-slider)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/react-view-slider.svg)](https://badge.fury.io/js/react-view-slider)\n\nNot another carousel; animates horizontal slide transitions between steps of\na form or levels of a drilldown.\n\n# Table of Contents\n\n- [Usage](#usage)\n- [Props](#props)\n- [`SimpleViewSlider`](#simpleviewslider)\n\n## Usage\n\n```sh\nnpm install --save react-view-slider\n```\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport ViewSlider from 'react-view-slider'\n\n// This function renders the view at the given index.\nconst renderView = ({ index, active, transitionState }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch3\u003eView {index}\u003c/h3\u003e\n    \u003cp\u003eI am {active ? 'active' : 'inactive'}\u003c/p\u003e\n    \u003cp\u003etransitionState: {transitionState}\u003c/p\u003e\n  \u003c/div\u003e\n)\n\n// activeView specifies which view should currently be showing.  Whenever you change it, ViewSlider will make the\n// view at the new activeView horizontally slide into view.\n\nReactDOM.render(\n  \u003cViewSlider\n    renderView={renderView}\n    numViews={3}\n    activeView={0}\n    animateHeight\n  /\u003e,\n  document.getElementById('root')\n)\n```\n\n## Props\n\n##### `renderView: (props: ViewProps) =\u003e React.Node` **(required)**\n\nThis function renders each view. `ViewSlider` will call it with the following `props`:\n\n- `index: number` - the index of the view (starting at 0)\n- `active: boolean` - whether the view should currently be showing\n- `transitionState: 'in' | 'out' | 'entering' | 'leaving'` - the view's transition state\n\n##### `numViews: number` **(required)**\n\nThe number of views present. `ViewSlider` will only render all views when transitioning; when idle, it will\nonly render the active view.\n\n##### `activeView: number` **(required)**\n\nThe index of the view that should be showing. Whenever you change this, `ViewSlider` will animate a horizontal slide\ntransition to the view at the new index.\n\n##### `spacing: number` (default: `1`)\n\nHow much horizontal space to put between the views. `spacing={1.5}` will space\nthe views apart by 50% of the width, `spacing={2}` will space the views apart\nby 100% of the width, etc.\n\nViews without much horizontal padding or margin of their own will look jammed\ntogether during transitions with a default `spacing` of 1, so in that case\nyou'll want to increase the `spacing`.\n\nA negative number will reverse the view order;\n`spacing={-1.5}` will arrange views from right to left with 50% width view\nspacing. You can also use the `rtl` property for this, especially if you want\nthe views to inherit `direction: rtl` for their own content layout.\n\n##### `rtl: boolean` (default: `false`)\n\nWhether to use right-to-left layout. This will reverse the view order and apply\n`direction: rtl` to the viewport style, and each view will inherit that layout\ndirection for its own content as well.\n\nTo reverse the view order without\nchanging layout direction of each view's content, you can use a negative number\nfor `spacing`.\n\n##### `keepViewsMounted: boolean` (default: `false`)\n\nIf `true`, `ViewSlider` will keep all views mounted after transitioning, not just the active view.\nYou may want to use this if there is a noticeable lag while other views mount at the beginning of a transition.\nHowever, it disables height animation and will cause the height of `ViewSlider` to be the max of all views' heights,\nso you will get best results if you also use `fillParent={true}`.\n\n##### `animateHeight: boolean` (default: `true`)\n\nIf truthy, `ViewSlider` will animate its height to match the height of the view at `activeView`.\n\n##### `transitionDuration: number` (default: `500`)\n\nThe duration of the transition between views.\n\n##### `transitionTimingFunction: string` (default: `'ease'`)\n\nThe timing function for the transition between views.\n\n##### `onSlideTransitionEnd: () =\u003e any`\n\nIf given, will be called when the slide transition ends.\n\n##### `prefixer: Prefixer`\n\nIf given, overrides the `inline-style-prefixer` used to autoprefix inline styles.\n\n##### `fillParent: boolean` (default: `false`)\n\nIf truthy, `ViewSlider` will use absolute positioning on itself and its views to fill its parent element.\n\n##### `className: string`\n\nAny extra class names to add to the root element.\n\n##### `style: Object`\n\nExtra inline styles to add to the root element.\n\n##### `viewportClassName: string`\n\nAny extra class names to add to the inner \"viewport\" element.\n\n##### `viewportStyle: Object`\n\nExtra inline styles to add to the inner \"viewport\" element.\n\n##### `viewStyle: Object`\n\nExtra inline styles to add to the view wrapper elements.\n\n##### `innerViewWrapperStyle: Object`\n\nExtra inline styles to add to the inner div between the `viewStyle` div and your\nview content element. (The inner div was added to ensure perfect height\nanimation.)\n\n##### `rootRef: (node: ?HTMLDivElement) =\u003e any`\n\nThe `ref` to pass to the root `\u003cdiv\u003e` element rendered by `ViewSlider`.\n\n##### `viewportRef: (node: ?HTMLDivElement) =\u003e any`\n\nThe `ref` to pass to the viewport `\u003cdiv\u003e` element rendered inside the root `\u003cdiv\u003e` by `ViewSlider`.\n\n## `SimpleViewSlider`\n\nThis is a wrapper for `ViewSlider` that takes a single child element. It renders the `ViewSlider` with the child's key\n(converted to a number) as the `activeView` and caches past child elements by key.\n\n### Example\n\n```js\nimport SimpleViewSlider from 'react-view-slider/simple'\n\nReactDOM.render(\n  \u003cSimpleViewSlider\u003e\n    \u003cdiv key={0}\u003eThis is view 0\u003c/div\u003e\n  \u003c/SimpleViewSlider\u003e,\n  document.getElementById('root')\n)\n\n// Rendering a child with a different key will trigger the transition.\nReactDOM.render(\n  \u003cSimpleViewSlider\u003e\n    \u003cdiv key={1}\u003eThis is view 1\u003c/div\u003e\n  \u003c/SimpleViewSlider\u003e,\n  document.getElementById('root')\n)\n```\n\n### Additional props\n\n##### `keepPrecedingViewsMounted: boolean` (default: `false`)\n\nIf `true`, `SimpleViewSlider` will keep views preceding the active view mounted, but not views following the active view.\n(As mentioned above, the order is determined by the `children`'s `key`s.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-view-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-view-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-view-slider/lists"}