@talismn/connect-ui

@talismn/connect-ui

Setup:

npm i --save @talismn/connect-ui

Components

Modal

Example

import { Modal } from '@talismn/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 '@talismn/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 '@talismn/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 '@talismn/connect-ui';

truncateMiddle('5FNfznCsgDKywfDXsYTf7YydpnMHUr8fjabK48rS2oFUugdc'); // 5FNf...ugdc

Running unit tests

Run nx test talisman-connect-ui to execute the unit tests via Jest.