{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/build-an-infinite-page-component/",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Build an Infinite Page Component\",\n  \"date\": \"2021-11-14T00:00:00.000Z\",\n  \"summary\": \"Page components are great for navigating content progressively. In this post, we'll take things a step further and explore how to implement an infinite page view component in React.\",\n  \"tags\": [\"javascript\", \"react\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In a recent project, I wanted to display an extensive list of items in an infinite row to keep things compact and easy to navigate in either direction. I\\u2019ve previously handled infinite paging in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/souporserious/react-view-pager\"\n  }, \"react-view-pager\"), \" but wanted to build a new implementation in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.framer.com/motion/\"\n  }, \"framer-motion\"), \" since I could greatly simplify things. There are a few tricky pieces to this component, so let\\u2019s get started!\"), mdx(\"p\", null, \"Follow along with the Codesandbox demo here:\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codesandbox.io/s/build-an-infinite-page-component-33evh\"\n  }, mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://codesandbox.io/static/img/play-codesandbox.svg\",\n    \"alt\": \"Build an Infinite Page Component\"\n  }))), mdx(\"h2\", {\n    \"id\": \"start-with-the-api\"\n  }, \"Start with the API\"), mdx(\"p\", null, \"First, we\\u2019ll start by stubbing out the initial API for our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Page\"), \" component. Doing this helps to formulate what the implementation will look like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import randomGradient from 'random-gradient'\\nimport { Page, View } from './Page'\\n\\nfunction App() {\\n  return (\\n    <Page>\\n      {[0, 1, 2, 3, 4, 5].map((index) => (\\n        <View\\n          key={index}\\n          width={400}\\n          height={400}\\n          color={randomGradient(index)}\\n        />\\n      ))}\\n    </Page>\\n  )\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"initial-implementation\"\n  }, \"Initial implementation\"), mdx(\"p\", null, \"We\\u2019ll start by implementing the parent \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Page\"), \" component. We need a track that moves along the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"x\"), \" axis:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { motion } from 'framer-motion'\\n\\nfunction Page() {\\n  return (\\n    <motion.div>\\n      <motion.div>{children}</motion.div>\\n    </motion.div>\\n  )\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"In a recent project, I wanted to display an extensive list of items in an infinite row to keep things compact and easy to navigate in either…","fields":{"readingTime":{"text":"2 min read"},"slug":"/build-an-infinite-page-component/"},"frontmatter":{"date":"11/14/2021","summary":"Page components are great for navigating content progressively. In this post, we'll take things a step further and explore how to implement an infinite page view component in React.","tags":["javascript","react"],"title":"Build an Infinite Page Component","image":null}},"previous":null,"next":null},"pageContext":{"id":"3e891c72-6e68-5726-b5ce-bd35ea6811ee"}},
    "staticQueryHashes": ["3764592887"]}