{"_id":"create-react-ref","_rev":"2-ca6dfd56a61ec11a70b41170952f6eb2","name":"create-react-ref","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"create-react-ref","version":"0.1.0","description":"Polyfill for the proposed React.createRef and React.forwardRef API","main":"lib/index.js","license":"MIT","keywords":["react","polyfill","ponyfill","createRef","forwardRef"],"repository":{"type":"git","url":"git+https://github.com/soupaJ/create-react-ref.git"},"files":["lib"],"scripts":{"test":"node ./initTests.js && jest","flow":"flow","format":"prettier --write '**/*.{js,md,json,js.flow,d.ts}'","build":"babel src -d lib --copy-files --ignore __tests__","prepublish":"npm run build","commit":"lint-staged"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^6.0.0","prettier":"^1.9.1","prop-types":"^15.6.0","raf":"^3.4.0","react":"^16.2.0","react-dom":"^16.2.0","rollup":"^0.57.1"},"lint-staged":{"*.{js,md,json,js.flow,d.ts}":["prettier --write","git add"]},"jest":{"silent":true},"dependencies":{"fbjs":"^0.8.16"},"gitHead":"82e44d451ddcb170a1aabca628664d4d5ecb9fe7","bugs":{"url":"https://github.com/soupaJ/create-react-ref/issues"},"homepage":"https://github.com/soupaJ/create-react-ref#readme","_id":"create-react-ref@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"9.5.0","_npmUser":{"name":"thecodingllama","email":"thecodingllama@gmail.com"},"dist":{"integrity":"sha512-w/DDeTaFSaDVtlfLs4q9FVFcFq1jPZ62dBUAV24OKXrobtDlnXeJ5EsnK+z98Kmh9Zyxv24Edc26z8f7APVUYg==","shasum":"0aa42aae4e66d8b164207ac8c468c35ce7bbd8eb","tarball":"https://registry.npmjs.org/create-react-ref/-/create-react-ref-0.1.0.tgz","fileCount":8,"unpackedSize":14817,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiJedBqPfUMDZZGYEUylhs6WJlw5rayfbToIiyyDu4kwIhAK+0VXhAnYAxbSLkCPjvCAV01U2RfKdaoUt4jjdLzKdJ"}]},"maintainers":[{"name":"thecodingllama","email":"thecodingllama@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-react-ref_0.1.0_1521912547963_0.8775054050062137"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-24T17:29:07.963Z","0.1.0":"2018-03-24T17:29:08.045Z","modified":"2022-04-27T21:13:48.101Z"},"maintainers":[{"name":"thecodingllama","email":"thecodingllama@gmail.com"}],"description":"Polyfill for the proposed React.createRef and React.forwardRef API","homepage":"https://github.com/soupaJ/create-react-ref#readme","keywords":["react","polyfill","ponyfill","createRef","forwardRef"],"repository":{"type":"git","url":"git+https://github.com/soupaJ/create-react-ref.git"},"bugs":{"url":"https://github.com/soupaJ/create-react-ref/issues"},"license":"MIT","readme":"# create-react-ref\n\n## What is this?\n\nReact version 16.3 introduces 2 new APIs, `React.createRef` ([React RFC #17](https://github.com/reactjs/rfcs/blob/master/text/0017-new-create-ref.md)) and `React.forwardRef` ([React RFC #30](https://github.com/reactjs/rfcs/blob/master/text/0030-ref-forwarding.md)).\n\nThis lib was created to allow using the new ref APIs without an immediate upgrade. Once upgraded to React 16.3, you should be able to remove this lib from your imports and just import React's version. However, this lib also checks for React's version and, if it is installed, it will use it instead of the polyfilled version. This way, you can remove the polyfill when you're ready and not at the same time that you upgrade.\n\n## How to install\n\nNPM:\n\n```\nnpm install create-react-ref\n```\n\nYARN:\n\n```\nyarn add create-react-ref\n```\n\nYou'll need to also have `react` installed\n\n## API and examples\n\n### createRef()\n\nThe `createRef` API returns an object which attaches the ref to a `current` property. The polyfill works by returning a function which when invoked internall by React with the ref, will attach it to a `current` property or the function.\n\n```javascript\nimport createRef from 'create-react-ref/lib/createRef';\n\nclass MyComponent extends React.Component {\n  // Once input ref is mounted, it is accessed\n  // under the `current` proprty\n  inputRef = createRef();\n\n  render() {\n    return (\n      <div>\n        <input type=\"text\" ref={this.inputRef} />\n      </div>\n    );\n  }\n\n  componentDidMount() {\n    this.inputRef.current.focus();\n  }\n}\n```\n\n### forwardRef(render)\n\nThe `forwardRef` API allows forwarding refs to a child (inner) component when a ref is attached to the parent (outer) component.\nArguments\n\n* [`render(props, ref)`: `ReactElement`]: Render should be a function that when called returns a ReactElement to render. It gets passed the current `props` and the `ref` to foward. Attach the `ref` to the inner child component's ref prop that you want a user to receive when attaching a ref to the outer component.\n\n```javascript\nimport forwardRef from 'create-react-ref/lib/forwardRef';\nimport createRef from 'create-react-ref/lib/createRef';\n\nconst ThemeContext = React.createContext('light');\n\n// Example HOC\nfunction withTheme(ThemedComponent) {\n  function ThemeContextInjector(props) {\n    return (\n      <ThemeContext.Consumer>\n        {value => (\n          <ThemedComponent {...props} ref={props.forwardedRef} theme={value} />\n        )}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  // Forward refs through to the inner, \"themed\" component:\n  return forwardRef((props, ref) => (\n    <ThemeContextInjector {...props} forwardedRef={ref} />\n  ));\n}\n\nconst ThemedButton = withTheme(Button);\n// For the polyfilled forwardRef, you must use `createRef`.\nconst buttonRef = createRef();\n\n// buttonRef.current will point to ThemedButton, rather than ThemeContextInjector\n<ThemedButton ref={buttonRef} />;\n```\n\n### Caveats\n\nThe polyfilled `forwardRef` is only compatible with refs created from `createRef` and not compatible with `ref` callbacks/functions. If you attach a ref callback to a component returned from the polyfilled `forwardRef`, you will get a RefForwarder component instance. This is one instance of how this library differs from React's implementation. React actually built an internal type to handle this, which cannot be polyfilled, and returns the actual forwared child. However, this polyfill provides a `getRef` function you can use to make sure the correct ref is always returned (polyfilled or not).\n\n## Extra APIs not in React\n\n### getRef(ref)\n\nArguments\n\n* [`ref`: `Node | Instance | null`]: Use this function to get the actual ref from a ref object created by `createRef` or `React.createRef`.\n\nExample:\n\nUsing with `createRef`\n\n```javascript\nclass {\n    divRef = createRef();\n\n    componentDidMount() {\n      // When using React.createRef or polyfilled createRef,\n      // to get the actual div dom node, you have to access\n      // it on the `current` property.\n      // For example, this.divRef.current === getRef(this.divRef);\n      const node = getRef(this.divRef); // returns div node\n    }\n    render() {\n        return <div ref={divRef}>text</div>\n    }\n}\n```\n\nUsing in a ref callback\n\n```javascript\nconst ForwardingRefComponent = forwardRef((props, ref) => {\n  return <div ref={ref}>{props.children}</div>\n});\n\nclass {\n    handleRef = (node) => {\n      // If using the polyfilled `forwardRef`:\n      // node instanceof RefForwarder === true\n      const actualForwardedNode = getRef(node);\n      // If using React.forwardRef\n      // node instanceof HTMLDivElement === true\n      const actualForwardedNode = node; // || getRef(node);\n    }\n\n    render() {\n        return <ForwardingRefComponent ref={this.handleRef}>text</ForwardingRefComponent>\n    }\n}\n```\n","readmeFilename":"README.md"}