pax_global_header 0000666 0000000 0000000 00000000064 14730255560 0014521 g ustar 00root root 0000000 0000000 52 comment=bd99fd56601f693ecdda88e2d4455cfa03c5689d
theKashey-use-callback-ref-e0096a0/ 0000775 0000000 0000000 00000000000 14730255560 0017072 5 ustar 00root root 0000000 0000000 theKashey-use-callback-ref-e0096a0/.eslintrc.js 0000664 0000000 0000000 00000003501 14730255560 0021330 0 ustar 00root root 0000000 0000000 module.exports = {
extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:react-hooks/recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier', 'import'],
rules: {
'@typescript-eslint/ban-ts-comment': 0,
'@typescript-eslint/ban-ts-ignore': 0,
'@typescript-eslint/no-var-requires': 0,
'@typescript-eslint/camelcase': 0,
'import/order': [
'error',
{
'newlines-between': 'always-and-inside-groups',
alphabetize: {
order: 'asc',
},
groups: ['builtin', 'external', 'internal', ['parent', 'index', 'sibling']],
},
],
'padding-line-between-statements': [
'error',
// IMPORT
{
blankLine: 'always',
prev: 'import',
next: '*',
},
{
blankLine: 'any',
prev: 'import',
next: 'import',
},
// EXPORT
{
blankLine: 'always',
prev: '*',
next: 'export',
},
{
blankLine: 'any',
prev: 'export',
next: 'export',
},
{
blankLine: 'always',
prev: '*',
next: ['const', 'let'],
},
{
blankLine: 'any',
prev: ['const', 'let'],
next: ['const', 'let'],
},
// BLOCKS
{
blankLine: 'always',
prev: ['block', 'block-like', 'class', 'function', 'multiline-expression'],
next: '*',
},
{
blankLine: 'always',
prev: '*',
next: ['block', 'block-like', 'class', 'function', 'return', 'multiline-expression'],
},
],
},
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx'],
},
'import/resolver': {
typescript: {
alwaysTryTypes: true,
},
},
},
};
theKashey-use-callback-ref-e0096a0/.gitignore 0000664 0000000 0000000 00000000032 14730255560 0021055 0 ustar 00root root 0000000 0000000 node_modules
dist
coverage theKashey-use-callback-ref-e0096a0/.npmrc 0000664 0000000 0000000 00000000043 14730255560 0020207 0 ustar 00root root 0000000 0000000 registry=https://registry.npmjs.org theKashey-use-callback-ref-e0096a0/.nvmrc 0000664 0000000 0000000 00000000002 14730255560 0020210 0 ustar 00root root 0000000 0000000 20 theKashey-use-callback-ref-e0096a0/.size-limit.js 0000664 0000000 0000000 00000000337 14730255560 0021577 0 ustar 00root root 0000000 0000000 module.exports = [
{
path: 'dist/es2015/index.js',
limit: '0.8 KB',
},
{
path: 'dist/es2015/useRef.js',
limit: '0.25 KB',
},
{
path: 'dist/es2015/useMergeRef.js',
limit: '0.65 KB',
},
];
theKashey-use-callback-ref-e0096a0/.size.json 0000664 0000000 0000000 00000000477 14730255560 0021025 0 ustar 00root root 0000000 0000000 [
{
"name": "dist/es2015/index.js",
"passed": true,
"size": 759,
"sizeLimit": 800
},
{
"name": "dist/es2015/useRef.js",
"passed": true,
"size": 245,
"sizeLimit": 250
},
{
"name": "dist/es2015/useMergeRef.js",
"passed": true,
"size": 608,
"sizeLimit": 650
}
]
theKashey-use-callback-ref-e0096a0/.travis.yml 0000664 0000000 0000000 00000000156 14730255560 0021205 0 ustar 00root root 0000000 0000000 language: node_js
node_js:
- '8'
cache: yarn
script:
- yarn
- yarn test:ci
notifications:
email: false theKashey-use-callback-ref-e0096a0/CHANGELOG.md 0000664 0000000 0000000 00000002637 14730255560 0020713 0 ustar 00root root 0000000 0000000 ## [1.3.2](https://github.com/theKashey/use-callback-ref/compare/v1.3.1...v1.3.2) (2024-03-20)
## [1.3.1](https://github.com/theKashey/use-callback-ref/compare/v1.3.0...v1.3.1) (2023-12-26)
### Bug Fixes
* correct refs adding and removing ([47cbc58](https://github.com/theKashey/use-callback-ref/commit/47cbc581cb740b631616817b55ea7aebb4bc0887))
# [1.3.0](https://github.com/theKashey/use-callback-ref/compare/v1.2.5...v1.3.0) (2022-04-18)
## [1.2.5](https://github.com/theKashey/use-callback-ref/compare/v1.2.4...v1.2.5) (2021-01-17)
## [1.2.4](https://github.com/theKashey/use-callback-ref/compare/v1.2.3...v1.2.4) (2020-06-06)
## [1.2.3](https://github.com/theKashey/use-callback-ref/compare/v1.2.2...v1.2.3) (2020-04-16)
## [1.2.2](https://github.com/theKashey/use-callback-ref/compare/v1.2.1...v1.2.2) (2020-04-11)
## [1.2.1](https://github.com/theKashey/use-callback-ref/compare/v1.2.0...v1.2.1) (2019-10-12)
# [1.2.0](https://github.com/theKashey/use-callback-ref/compare/v1.1.0...v1.2.0) (2019-10-12)
### Features
* additional API ([e07645c](https://github.com/theKashey/use-callback-ref/commit/e07645c3200b4f2dc5a942ee74c7a20713ec38cf))
# [1.1.0](https://github.com/theKashey/use-callback-ref/compare/v1.0.1...v1.1.0) (2019-10-08)
### Features
* add mergeRef ([32278f9](https://github.com/theKashey/use-callback-ref/commit/32278f9380485ac42edf30c7868864fb1e1b8db9))
## 1.0.1 (2019-06-22)
theKashey-use-callback-ref-e0096a0/LICENSE 0000664 0000000 0000000 00000002057 14730255560 0020103 0 ustar 00root root 0000000 0000000 MIT License
Copyright (c) 2017 Anton Korzunov
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
theKashey-use-callback-ref-e0096a0/README.md 0000664 0000000 0000000 00000014776 14730255560 0020370 0 ustar 00root root 0000000 0000000
---
> Keep in mind that useRef doesn't notify you when its content changes.
> Mutating the .current property doesn't cause a re-render.
> If you want to run some code when React attaches or detaches a ref to a DOM node,
> you may want to use ~~a callback ref instead~~ .... **useCallbackRef** instead.
– [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html#useref)
Read more about `use-callback` pattern and use cases:
- https://dev.to/thekashey/the-same-useref-but-it-will-callback-8bo
This library exposes helpers to handle any case related to `ref` _lifecycle_
- `useCallbackRef` - react on a ref change (replacement for `useRef`)
- `createCallbackRef` - - low level version of `useCallbackRef`
- `useMergeRefs` - merge multiple refs together creating a stable return ref
- `mergeRefs` - low level version of `useMergeRefs`
- `useTransformRef` - transform one ref to another (replacement for `useImperativeHandle`)
- `transformRef` - low level version of `useTransformRef`
- `useRefToCallback` - convert RefObject to an old callback-style ref
- `refToCallback` - low level version of `useRefToCallback`
- `assignRef` - assign value to the ref, regardless it is RefCallback or RefObject
All functions are tree shakable, but even together it's **less then 300b**.
# API
💡 Some commands are hooks based, and returns the same refs/functions every render.
But some are not, to be used in classes or non-react code.
## useRef API
🤔 Use case: every time you have to react to ref change
API is 99% compatible with React `createRef` and `useRef`, and just adds another argument - `callback`,
which would be called on **ref update**.
#### createCallbackRef - to replace React.createRef
- `createCallbackRef(callback)` - would call provided `callback` when ref is changed.
#### useCallbackRef - to replace React.useRef
- `useCallbackRef(initialValue, callback)` - would call provided `callback` when ref is changed.
> `callback` in both cases is `callback(newValue, oldValue)`. Callback would not be called if newValue and oldValue is the same.
```js
import { useRef, createRef, useState } from 'react';
import { useCallbackRef, createCallbackRef } from 'use-callback-ref';
const Component = () => {
const [, forceUpdate] = useState();
// I dont need callback when ref changes
const ref = useRef(null);
// but sometimes - it could be what you need
const anotherRef = useCallbackRef(null, () => forceUpdate());
useEffect(() => {
// now it's just possible
}, [anotherRef.current]); // react to dom node change
};
```
💡 You can use `useCallbackRef` to convert RefObject into RefCallback, creating bridges between the old and the new code
```js
// some old component
const onRefUpdate = (newRef) => {...}
const refObject = useCallbackRef(null, onRefUpdate);
// ...
```
## assignRef
🤔 Use case: every time you need to assign ref manually, and you dont know the shape of the ref
`assignRef(ref, value)` - assigns `values` to the `ref`. `ref` could be RefObject or RefCallback.
```
🚫 ref.current = value // what if it's a callback-ref?
🚫 ref(value) // but what if it's a object ref?
import {assignRef} from "use-callback-ref";
✅ assignRef(ref, value);
```
## useTransformRef (to replace React.useImperativeHandle)
🤔 Use case: ref could be different.
`transformRef(ref, tranformer):Ref` - return a new `ref` which would propagate all changes to the provided `ref` with applied `transform`
```js
// before
const ResizableWithRef = forwardRef((props, ref) => i && ref(i.resizable)} />);
// after
const ResizableWithRef = forwardRef((props, ref) => (
(i ? i.resizable : null))} />
));
```
## refToCallback
`refToCallback(ref: RefObject): RefCallback` - for compatibility between the old and the new code.
For the compatibility between `RefCallback` and RefObject use `useCallbackRef(undefined, callback)`
## useMergeRefs
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
When developing low level UI components, it is common to have to use a local ref but also support an external one using React.forwardRef. Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
```js
import React from 'react';
import { useMergeRefs } from 'use-callback-ref';
const MergedComponent = React.forwardRef((props, ref) => {
const localRef = React.useRef();
// ...
// both localRef and ref would be populated with the `ref` to a `div`
return ;
});
```
💡 - `useMergeRefs` will always give you the same return, and you don't have to worry about `[localRef, ref]` unique every render.
## mergeRefs
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
is a non-hook based version. Will produce the new `ref` every run, causing the old one to unmount, and be _populated_ with the `null` value.
> mergeRefs are based on https://github.com/smooth-code/react-merge-refs, just exposes a RefObject, instead of a callback
`mergeRefs` are "safe" to use as a part of other hooks-based commands, but don't forget - it returns a new object every call.
# Similar packages:
- [apply-ref](https://github.com/mitchellhamilton/apply-ref) - `applyRefs` is simular to `mergeRef`, `applyRef` is similar to `assignRef`
- [useForkRef](https://react-hooks.org/docs/use-fork-ref) - `useForkRef` is simular to `useMergeRefs`, but accepts only two arguments.
- [react-merge-refs](https://github.com/gregberge/react-merge-refs) - `merge-refs` is simular to `useMergeRefs`, but not a hook and does not provide "stable" reference.
---
> Is it a rocket science? No, `RefObject` is no more than `{current: ref}`, and `use-callback-ref` is no more than `getter` and `setter` on that field.
# License
MIT
theKashey-use-callback-ref-e0096a0/__tests__/ 0000775 0000000 0000000 00000000000 14730255560 0021030 5 ustar 00root root 0000000 0000000 theKashey-use-callback-ref-e0096a0/__tests__/index.tsx 0000664 0000000 0000000 00000014322 14730255560 0022701 0 ustar 00root root 0000000 0000000 /**
* @jest-environment jsdom
*/
import {render} from '@testing-library/react'
import * as React from 'react';
import {createRef} from 'react';
import {
refToCallback,
useRefToCallback,
createCallbackRef,
mergeRefs,
useTransformRef,
useCallbackRef,
useMergeRefs,
} from '../src';
describe('Specs', () => {
describe('useCallbackRef', () => {
it('base - createRef', () => {
const ref = React.createRef();
render(test
);
expect(ref.current).not.toBe(null);
});
it('shall work as createRef', () => {
const spy = jest.fn();
const ref = createCallbackRef(spy);
const {rerender} = render(test
);
rerender(test
)
expect(spy).toBeCalledWith(ref.current, null);
expect(spy).toHaveBeenCalledTimes(1);
expect(ref.current).not.toBe(null);
});
it('shall work as useRef', () => {
const spy1 = jest.fn();
const spy2 = jest.fn();
let counter = 0;
const Test = (_props:any) => {
const x = counter++;
const ref = useCallbackRef(null, () => spy1(x));
const mref = useMergeRefs([ref, spy2]);
return (
test
);
};
const {rerender} = render();
expect(spy1).toBeCalledWith(0);
expect(spy1).toHaveBeenCalledTimes(1);
expect(spy2).not.toBeCalledWith(null);
expect(spy2).toHaveBeenCalledTimes(1);
rerender();
expect(spy1).toBeCalledWith(0);
expect(spy1).toHaveBeenCalledTimes(1);
expect(spy2).not.toBeCalledWith(null);
rerender();
expect(spy1).toBeCalledWith(2);
expect(spy1).toHaveBeenCalledTimes(3);
expect(spy2).toBeCalledWith(null);
});
});
describe('mergeRef', () => {
it('merges two refs', () => {
const spy1 = jest.fn();
const ref1 = createCallbackRef(spy1);
const spy2 = jest.fn();
const ref2 = createCallbackRef(spy2);
const ref3 = createRef() as React.MutableRefObject;
const ref4 = jest.fn();
const TestComponent = () => test
;
render();
const ref = ref1.current;
expect(ref).not.toBe(null);
expect(spy1).toBeCalledWith(ref, null);
expect(spy2).toBeCalledWith(ref, null);
// expect(ref3.current).toBe(ref);
expect(ref4).toBeCalledWith(ref);
});
it('ref equal', () => {
const spy = jest.fn();
const ref = createRef();
let counter = 0;
const Test = (_props:any) => {
const x = counter++;
const mref = mergeRefs([spy, ref]);
return (
test
);
};
const {rerender} = render();
expect(spy).not.toBeCalledWith(null);
expect(spy).toBeCalledWith(ref.current);
expect(spy).toHaveBeenCalledTimes(1);
rerender();
expect(spy).toBeCalledWith(null);
expect(spy).toBeCalledWith(ref.current);
expect(spy).toHaveBeenCalledTimes(3);
});
});
describe('transformRef', () => {
it('composite case', () => {
const spy1 = jest.fn();
const spy2 = jest.fn();
const spy4 = jest.fn();
const ref1 = createCallbackRef(spy1);
const ref4t = createRef();
const TestComponent = (_props:any) => {
const ref2 = createCallbackRef(spy2);
const ref3 = useTransformRef(ref2, (current) => current ? current!.innerHTML : 'empty');
const ref4 = refToCallback(spy4);
const ref4s = useRefToCallback(ref4t);
return test
;
};
const {rerender} = render()
rerender();
const ref = ref1.current;
expect(ref).not.toBe(null);
expect(spy1).toBeCalledWith(ref, null);
expect(spy2).toBeCalledWith('test', null);
expect(ref4t.current).toBe(ref);
expect(spy4).toBeCalledWith(ref);
});
});
describe('edge cases', () => {
it('null provided to useRefToCallback', () => {
expect(() => useRefToCallback(null)).not.toThrow();
expect(useRefToCallback(null)).toBe(useRefToCallback(null));
expect(() => useRefToCallback(null)(null)).not.toThrow();
});
it('merging null refs', () => {
const ref1 = createRef();
const TestComponent = () => {
const ref = useMergeRefs([null, ref1]);
ref.current = 'xx';
return null;
};
render();
expect(ref1.current).toBe('xx');
});
it('updating refs on the fly', () => {
const ref1 = createRef();
const ref2 = createRef();
const TestComponent = ({r}: { r: React.RefObject }) => {
const ref = useMergeRefs([null, r]);
ref.current = 'xx';
return null;
};
const {rerender} = render();
expect(ref1.current).toBe('xx');
rerender();
expect(ref1.current).toBe(null);
expect(ref2.current).toBe('xx');
});
});
});
theKashey-use-callback-ref-e0096a0/__tests__/ref.spec.tsx 0000664 0000000 0000000 00000021662 14730255560 0023304 0 ustar 00root root 0000000 0000000 /**
* @jest-environment jsdom
*/
/**
* @fileoverview spec from https://github.com/agriffis/merge-refs-playground/blob/main/src/hooks/index.test.jsx
*/
import {fireEvent, render, screen, waitFor} from '@testing-library/react'
import React from 'react';
import {useEffect, useLayoutEffect, useRef, useState} from 'react'
import {useMergeRefs} from '../src'
test('works with zero refs', async () => {
const TestMe = () => {
const mergedRef = useMergeRefs([])
return
}
render()
await screen.findByTestId('foo')
// If we made it this far, we're good.
})
test('works with one ref', async () => {
let current
const TestMe = () => {
const oneRef = useRef(null)
const mergedRef = useMergeRefs([oneRef])
useLayoutEffect(() => {
current = oneRef.current
})
return
}
render()
const div = await screen.findByTestId('foo')
expect(current).toBe(div)
})
test('works with two refs', async () => {
let currents
const TestMe = () => {
const oneRef = useRef(null)
const twoRef = useRef(null)
const mergedRef = useMergeRefs([oneRef, twoRef])
useLayoutEffect(() => {
currents = [oneRef.current, twoRef.current]
})
return
}
render()
const div = await screen.findByTestId('foo')
expect(currents).toEqual([div, div])
})
test('updates when ref moves to another element', async () => {
let current:any;
const TestMe = () => {
const [n, setN] = useState(1)
const oneRef = useRef(null)
const mergedRef = useMergeRefs([oneRef])
useLayoutEffect(() => {
current = oneRef.current
})
return (
)
}
render()
const wrapper = await screen.findByTestId('wrapper')
const div1 = await screen.findByTestId('1')
const div2 = await screen.findByTestId('2')
expect(current).toBe(div1)
expect(current).not.toBe(div2)
fireEvent.click(wrapper)
await waitFor(() => expect(current).toBe(div2))
expect(current).not.toBe(div1)
})
test('updates when element appears', async () => {
let current:any;
const TestMe = () => {
const [appeared, setAppeared] = useState(false)
const oneRef = useRef(null)
const mergedRef = useMergeRefs([oneRef])
useLayoutEffect(() => {
current = oneRef.current
})
return (
setAppeared(true)} data-testid="wrapper">
{!appeared ? null :
}
)
}
render()
const wrapper = await screen.findByTestId('wrapper')
expect(screen.queryByTestId('foo')).toBeNull()
fireEvent.click(wrapper)
const tada = await screen.findByTestId('foo')
expect(current).toBe(tada)
})
test('updates when element disappears', async () => {
let current:any;
const TestMe = () => {
const [disappeared, setDisappeared] = useState(false)
const oneRef = useRef(null)
const mergedRef = useMergeRefs([oneRef])
useLayoutEffect(() => {
current = oneRef.current
})
return disappeared ? null : (
setDisappeared(true)}
/>
)
}
render(
)
const tada = await screen.findByTestId('foo')
expect(current).toBe(tada)
fireEvent.click(tada)
await waitFor(() => expect(screen.queryByTestId('foo')).toBeNull())
expect(current).toBeNull()
})
test('handles adding new refs to the set', async () => {
let currents:any;
const TestMe = () => {
const [clicked, setClicked] = useState(false)
const oneRef = useRef
(null)
const twoRef = useRef(null)
const mergedRef = useMergeRefs(!clicked ? [oneRef] : [oneRef, twoRef])
useLayoutEffect(() => {
currents = [oneRef.current, twoRef.current]
})
return (
setClicked(true)}
/>
)
}
render(
)
const div = await screen.findByTestId('foo')
expect(currents).toEqual([div, null])
fireEvent.click(div)
await waitFor(() => expect(currents).toEqual([div, div]))
})
test('handles nulling refs removed from the set', async () => {
let currents:any;
const TestMe = () => {
const [clicked, setClicked] = useState(false)
const oneRef = useRef
(null)
const twoRef = useRef(null)
const mergedRef = useMergeRefs(clicked ? [oneRef] : [oneRef, twoRef])
useLayoutEffect(() => {
currents = [oneRef.current, twoRef.current]
})
return (
setClicked(true)}
/>
)
}
render(
)
const div = await screen.findByTestId('foo')
expect(currents).toEqual([div, div])
fireEvent.click(div)
await waitFor(() => expect(currents).toEqual([div, null]))
})
// https://github.com/gregberge/react-merge-refs/issues/5#issuecomment-736587365
test('protects sub-refs from null-then-value flip-flop', async () => {
const mockCallbackRef = jest.fn()
const TestMe = () => {
const [clicked, setClicked] = useState(false)
const extraRef = useRef
(null)
const mergedRef = useMergeRefs(
!clicked ? [mockCallbackRef] : [mockCallbackRef, extraRef],
)
return (
setClicked(true)}
/>
)
}
render(
)
const div = await screen.findByTestId('foo')
expect(mockCallbackRef.mock.calls).toEqual([[div]])
fireEvent.click(div)
// If hook doesn't protect, this will be [[div], [null], [div]]
expect(mockCallbackRef.mock.calls).toEqual([[div]])
})
// https://github.com/gregberge/react-merge-refs/issues/5#issuecomment-736587365
test('returns a stable ref over sub-ref updates', async () => {
const seen = new Set()
const TestMe = () => {
const [rerender, setRerender] = useState(false)
const oneRef = useRef
(null)
const twoRef = useRef(null)
const mergedRef = useMergeRefs(!rerender ? [oneRef] : [oneRef, twoRef])
seen.add(mergedRef)
useEffect(() => setRerender(true), [])
return
}
render()
await screen.findByTestId('foo')
expect(seen.size).toEqual(1)
})
// https://github.com/gregberge/react-merge-refs/issues/5#issuecomment-736417057
test('updates before layout effects', async () => {
const seen:any[] = []
const TestMe = () => {
const [rerender, setRerender] = useState(false)
const oneRef = useRef(null)
// the only way to do something before layout effects is to define our one "before"
const mergedRef = useMergeRefs(rerender ? [oneRef] : [])
useLayoutEffect(() => {
seen.push(oneRef.current)
setRerender(true)
})
return
}
render()
const div = await screen.findByTestId('foo')
await waitFor(() => expect(seen).toContain(div))
// Failure here is [undefined, undefined]
expect(seen).toEqual([null, div])
})
test('returns a gettable ref', async () => {
let oneRef:any, mergedRef:any;
const TestMe = () => {
oneRef = useRef(null)
mergedRef = useMergeRefs([oneRef])
return
}
render(
)
expect(mergedRef.current).toBe(oneRef.current)
})
test('returns a settable ref', async () => {
let oneRef:any, mergedRef:any;
const TestMe = () => {
oneRef = useRef
(null)
mergedRef = useMergeRefs([oneRef])
useLayoutEffect(() => {
mergedRef.current = 42
}, [])
return
}
render()
expect(oneRef.current).toBe(42)
}) theKashey-use-callback-ref-e0096a0/example/ 0000775 0000000 0000000 00000000000 14730255560 0020525 5 ustar 00root root 0000000 0000000 theKashey-use-callback-ref-e0096a0/example/app.tsx 0000664 0000000 0000000 00000000716 14730255560 0022051 0 ustar 00root root 0000000 0000000 import * as React from 'react';
import {Component} from 'react';
import {GHCorner} from 'react-gh-corner';
import {AppWrapper} from './styled';
export interface AppState {
}
const repoUrl = 'https://github.com/zzarcon/';
export default class App extends Component <{}, AppState> {
state: AppState = {
}
render() {
return (
Example!
)
}
} theKashey-use-callback-ref-e0096a0/example/assets/ 0000775 0000000 0000000 00000000000 14730255560 0022027 5 ustar 00root root 0000000 0000000 theKashey-use-callback-ref-e0096a0/example/assets/.gitkeep 0000664 0000000 0000000 00000000000 14730255560 0023446 0 ustar 00root root 0000000 0000000 theKashey-use-callback-ref-e0096a0/example/index.html 0000664 0000000 0000000 00000000276 14730255560 0022527 0 ustar 00root root 0000000 0000000
Example