DSLib

This is an internal package with common functionality used in the Atlassian Design System Team. This package comes with no support and semver guarantees, your app will break if you use this directly!

Installation

1yarn add @atlaskit/ds-lib

Utilities

noop()

1import noop from '@atlaskit/ds-lib/noop';
2
3noop();

warnOnce()

1import warnOnce from '@atlaskit/ds-lib/warn-once';
2
3function Component() {
4	// Print the warning messagein in the Web console only once per session.
5	if (process.env.NODE_ENV !== 'production') {
6		warnOnce('This component has been deprecated.');
7	}
8
9	return <div>This component has been deprecated</div>;
10}

mergeRefs()

1import mergeRefs from '@atlaskit/ds-lib/merge-refs';
2
3const Component = forwardRef((props, ref) => {
4  const customRef = useRef<HTMLElement | null>(null);
5
6  return (
7    // Use the utility function to merge the forwarded ref
8    // with the created ref.
9    <div ref={mergeRefs[ref, customRef]} />
10  );
11}

device-check

1import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
2isAppleDevice();
3isSafari();

React hooks

useLazyRef()

1import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';
2
3function Component({ onClick }) {
4	// Initialize the ref
5	const ref = useLazyRef(() => {
6		/* Return initial data */
7	});
8
9	// Access like a normal ref
10	return <button onClick={() => onClick(ref.current)}>Click me!</button>;
11}

useControlled()

1import useControlled from '@atlaskit/ds-lib/use-controlled';
2
3function ControlledComponent({ value, defaultValue = 0 }) {
4	const [uncontrolledState, setUncontrolledState] = useControlled(value, () => defaultValue);
5	return <button onClick={() => setUncontrolledState(uncontrolledState + 1)}>Update state</button>;
6}

usePreviousValue()

1function Component() {
2	const [currentValue] = useState(1);
3	const previousValue = usePreviousValue(currentValue);
4
5	previousValue; // undefined
6	currentValue; // 1
7
8	return null;
9}

useStableRef()

1function Component({ canShow }: { canShow: () => boolean }) {
2	const stableRef = useStableRef({ canShow });
3
4	useEffect(
5		() => {
6			stableRef.current.canShow();
7		},
8		// Able to use the last render value of `canShow` without needing
9		// to invalidate the effect. Useful for lazy usage of props.
10		[],
11	);
12
13	return null;
14}

useLazyCallback()

1import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
2
3function Component() {
4	// `callback` always has the same reference.
5	const callback = useLazyCallback(() => {
6		// Watch out for its stale closure however!
7	});
8
9	return null;
10}

useStateRef()

1import useStateRef from '@atlaskit/ds-lib/use-state-ref';
2
3function Component() {
4  const [valueRef, setState] = useStateRef(0);
5
6  // Access the latest value, even inside stale closures.
7  console.log(valueRef.current);
8
9  // Update state as you would with use state
10  return <div onClick={() => setState(prev => prev + 1)} />;

useScrollbarWidth()

1import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
2
3function Component() {
4	const scrollbar = useScrollbarWidth();
5
6	return (
7		// Use the scrollbar width in your styles/as you wish.
8		// The ref should be attached to the scrollable element.
9		<div id="container" style={{ padding: scrollbar.width }}>
10			<div id="scrollable" ref={scrollbar.ref} />
11		</div>
12	);
13}

useCloseOnEscapePress()

Notice: useCloseOnEscapePress() is deprecated, Please use useCloseOnEscapePress from @atlaskit/layering instead.

1import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
2
3// Will callback when escape is pressed
4useCloseOnEscapePress({
5	onClose: () => {},
6	isDisabled: false,
7});

useAutoFocus()

1import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
2
3const elementRef = useRef();
4useAutoFocus(elementRef, true);
5
6<div ref={elementRef} />;