Могу ли я инкапсулировать логику в компоненте?

Question

[Kentavr16]

Писал компонент Popup.

export default function Popup({type,text,isVisible}){

    const types = {
        "error":"bg-red-500",
        "success":"bg-green-500",
        "info":"bg-yellow-500"
    }

    return(
        <div
            className={`overflow-x-hidden fixed rounded-md p-4 text-center text-xl right-10
            bottom-20 ${types[type]} min-w-[300px] ${isVisible?"opacity-90":"opacity-0"} ${isVisible?"":"transform translate-x-[1000px]"} transition-all ease-in-out duration-1000`}>
            {text}
        </div>
    )
}

В общем простой компонент. Но его использование тянет за собой необходимость создавать стейт в родительском компоненте - isVisible,и доп. логику(таймаут) для закрытия попапа. Можно ли это инкапсулировать в сам компонент? Возможно с помощью кастомных хуков к примеру.

Answer 1

[szQocks]

https://codesandbox.io/s/divine-water-32g3k8?file=...

Comments

[Kentavr16]

Спасибо. Осталось определить что лучше )

[szQocks]

Kentavr16, только я не написал там логику для таймаута, но если не справишься, дай знать

[szQocks]

Kentavr16, а лучше вообще в самом компоненте Popup - заюзай https://www.npmjs.com/package/react-transition-group - им все пользуются кому не лень) анимированное скрытие попапа это как раз таки та идеальная ситуация где стоит заюзать react-transition-group что бы не писать своё решение для скрытия, какие-то таймауты и т.д

[Kentavr16]

szQocks, вроде хорошее решение. Приблизительно это я собирался писать сам) Обязательно в копилку, испробую. Спасибо!