1.1.1 • Published 2 years ago
@talisman-connect/ui v1.1.1
@talisman-connect/ui
Setup:
npm i --save @talisman-connect/ui
Components
Modal
Example
import { Modal } from '@talisman-connect/ui';
<Modal
className={}
// The Modal title
title={}
// The Modal toggle
isOpen={false}
// The id where the Modal is appended. By default, it's appended to document.body.
appId=""
// Callback on Modal close
handleClose={() => { ... }}
// [Optional] Callback on Modal back button click. Used with a multi modal setup.
handleBack={() => { ... }}
>
<div>The modal body</div>
</Modal>
Hooks
useLocalStorage
Use localStorage values with ease.
import { useLocalStorage } from '@talisman-connect/ui';
const Dummy = () => {
const [value, setValue] = useLocalStorage('dummy-key');
return (
<button onClick={() => setValue('Dummy')}>{value || 'Click Me'}</button>
);
};
useOnClickOutside
Detects clicks outside of the ref
element and calls the provided callback.
import { useOnClickOutside } from '@talisman-connect/ui';
const Popup = ({ handleClose }) => {
const ref = useRef<HTMLDivElement>(null);
useOnClickOutside(ref, handleClose);
return <div ref={ref}>/* content */</div>;
};
Utils
truncateMiddle
Truncates the input string and replace with dots.
import { truncateMiddle } from '@talisman-connect/ui';
truncateMiddle('5FNfznCsgDKywfDXsYTf7YydpnMHUr8fjabK48rS2oFUugdc'); // 5FNf...ugdc
Running unit tests
Run nx test talisman-connect-ui
to execute the unit tests via Jest.