linkref
v1.1.0
Like Linked State, but for Refs.
0/weekUpdated 1 years agoMITUnpacked: 9.6 KB
Published by Jason Miller
npm install linkreflinkref  
> Like [Preact]'s [Linked State], but for [refs].
This gives you the ease of String Refs _(unavailable in Preact core, deprecated in React)_, using Function Refs.
Calling linkRef('name') creates an optimized ref handler function that populates this.refs.name on your component for you. The trick is that linkRef() is memoized - this means you can call it as many times as you want (inline, in render!) and it won't create any new closures. 🌈
> Note: You can accomplish this with function refs just fine! It's important to understand how function refs work, since linkRef() is just generating a function ref on your behalf. Here is an unoptimized implementation of linkRef() - be sure to understand how it works:
>
> ``js`
> function linkRef(component, name) {
> if (!component.refs) component.refs = {};
> return (ref) => component.refs[name] = ref;
> }
>
---
$3
Available as linkref on npm:
`sh`
npm install --save linkref
$3
`js
import linkRef from 'linkref';
class Foo extends Component {
componentDidMount() {
// log the
console.log(this.refs.foo);
}
render() {
return (
some text
);
}
}
`
$3
[Preact]'s
class is extensible, so linkref provides a polyfill to integrate more tightly:`js
import 'linkref/polyfill';class Foo extends Component {
componentDidMount() {
// log the
to the console:
console.log(this.refs.foo);
}
render() {
return (
some text
);
}
}
`
$3
There's also a Babel plugin available as
:`js
// .babelrc
{
"plugins": [
"linkref/babel", // all options are optional - here are the defaults:
["linkref/babel", {
"module": "linkref",
"importName": "_createStringRef"
}]
]
}
`It's also useful as a one-off codemod for upgrading from string refs to linkref:
sh
npm i --save linkrefrun babel on all files in ./src, changing them in-place:
npx babel --no-babelrc --plugins=linkref/babel src -d src
`
Don't have npx?
Update to the latest
version to get it, or do this instead:`sh
get babel cli:
npm i @babel/core @babel/cli
you'll be using linkref as a library now:
npm i --save linkref
run babel on all files in ./src, changing them in-place:
./node_modules/.bin/babel --no-babelrc --plugins=linkref/babel src -d src
``---
$3
MIT
[Preact]: https://github.com/developit/preact
[Linked State]: https://preactjs.com/guide/linked-state
[refs]: https://facebook.github.io/react/docs/refs-and-the-dom.html