Positioning

Toasts can be positioned freely in addition to their default position.
There are two methods.

Toast Container Styling

The example below is code that changes the position of the existing toast container using Tailwind.

import { ToastContainer, toast } from 'react-strawberry-toast';
  import 'react-strawberry-toast/dist/style.css';

  function App() {
    const [msg, setMsg] = useState('');

    const showToast = () => {
      toast.custom(
        ({ isVisible }) => (
          <div
            role="alert"
            className={`bg-red-500 rounded-md px-2 text-white inline-block ${clsx(
              isVisible ? 'animate-right-grow' : 'animate-left-shrink'
            )}`}
          >
            {msg}
          </div>
        ),
      );
    }

    const onClick = () => {
      if (!msg) return;
      showToast();
      setMsg('');
    };

    useEffect(() => {
      const handler = (e: KeyboardEvent) => {
        if (e.key === 'Enter' && msg) {
          showToast();
          setMsg('');
        }
      };
      window.addEventListener('keydown', handler);
      return () => {
        window.removeEventListener('keydown', handler);
      };
    }, [msg]);

    return (
      <>
        <div id="profile" className="border border-gray-300 p-2 w-10/12 max-sm:w-full relative">
          <div className="flex items-center gap-2">
            <Image src="/profile.svg" width={34} height={34} alt="profile icon" />
            <div>developer</div>
          </div>

          <div className="py-1" />
          <ToastContainer className="absolute flex gap-2 flex-col" />
          <div className="py-2" />
          <div className="py-2" />

          <div className="flex items-center gap-2">
            <input
              type="text"
              value={msg}
              onChange={(e) => setMsg(e.target.value)}
              className="w-full border border-primary-gray px-1"
              placeholder="type a message"
            />
            <button type="button" onClick={onClick}>
              <Image src="/send.svg" width={24} height={24} alt="send icon" />
            </button>
          </div>
        </div>
      </>
    );
  }

Toast target option

You can adjust the position of the toast by giving the style option.

              toast('toast target', {
                  target: {
                    element: element.current,
                    offset: [30, 30],
                  },
                }
              );