{ "componentChunkName": "component---src-templates-post-js", "path": "/usevideojs-a-react-hooks-for-videojs", "result": {"data":{"site":{"siteMetadata":{"title":"your friend Joel's digital garden","description":"Articles and notes from a collaborator at egghead.io. Musings on software, business, and life from a skilled virtual assistant.","author":{"name":"Joel Hooks"},"keywords":["Video Blogger"]}},"mdx":{"excerpt":"The Video.js docs have a good explaination for using Video.js with React, but it focuses on a class based implementation. Getting Video.js to consistently work with React Hooks is fairly straight forward, with a gotcha or two. Here's the…","fields":{"github":"https://github.com/joelhooks/joelhooks-com/tree/master/content/blog/2021-03-26--usevideojs-a-react-hooks-for-videojs~~0-JvBF7id/index.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 \"id\": \"0-JvBF7id\",\n \"slug\": \"usevideojs-a-react-hooks-for-videojs\",\n \"date\": \"2021-03-26T00:00:00.000Z\",\n \"title\": \"useVideoJs: a React Hooks for Video.js\",\n \"published\": false\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, \"The Video.js docs have a good explaination for using Video.js with React, but it focuses on a class based implementation. Getting Video.js to consistently work with React Hooks is fairly straight forward, with a gotcha or two.\"), mdx(\"p\", null, \"Here's the hook:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import * as React from 'react'\\nimport videojs from 'video.js'\\nimport 'video.js/dist/video-js.css'\\n\\nexport const useVideoJS = (videoJsOptions: any) => {\\n const videoNode = React.useRef(null)\\n const player = React.useRef(null)\\n\\n React.useEffect(() => {\\n player.current = videojs(videoNode.current, videoJsOptions)\\n\\n return () => {\\n player.current.dispose()\\n }\\n }, [changedKey])\\n\\n const Video = React.useCallback(\\n ({children, ...props}) => {\\n return (\\n
\\n \\n
\\n )\\n },\\n [changedKey],\\n )\\n return {Video, player: player.current}\\n}\\n\")), mdx(\"p\", null, \"The hook returns the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Video\"), \" component, which is memoized with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useCallback\"), \". This is important! This approach gives us a stable component to use that only updates if the options have changed.\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useEffect\"), \" we are creating an instance of the player and that is also properly disposed of if the options change.\"), mdx(\"p\", null, \"Now you can use it like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import * as React from 'react'\\nimport {useVideoJs} from './use-video-js'\\n\\nconst MyComponent = () => {\\n const {Video} = useVideoJS({\\n poster: video.poster,\\n sources: [{src: video.url}],\\n controls: true,\\n playbackRates: [0.5, 1, 1.5, 2],\\n responsive: true,\\n })\\n\\n return (\\n \\n )\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"useVideoJs: a React Hooks for Video.js","date":"March 26, 2021","banner":null,"slug":"usevideojs-a-react-hooks-for-videojs","keywords":null}}},"pageContext":{"id":"b77ac617-766f-53f5-b7fa-b70a8fad9720","prev":{"id":"0fc02c22-ae07-58ca-81fb-16bbba574811","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"I split this into two campaigns and multiple segments for clarity.  This lets me loop through the logic instead of \"stacking\" a bunch of repetition in a single campaign. I'm not sure if this is technically fine in CIO and haven't tested it yet…","fields":{"title":"Self-Paced Email Course in Customer.io","slug":"self-paced-email-course-customerio","date":"2021-04-16T00:00:00.000Z"}},"next":{"id":"02611702-40fa-5b7d-a03e-774f4d2c3f19","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"If you want to generate a (pseudo) random number using a Liquid filter in Convertkit , here's the code: What's actually going on here? This is a complex liquid template, so let's break it down, starting from the right and working our way left. using…","fields":{"title":"Using a Random Number to Segment Emails in ConvertKit Automations using Liquid","slug":"random-number-convertkit-liquid","date":"2021-03-09T00:00:00.000Z"}}}}, "staticQueryHashes": ["1045846374"]}