Action Functions

[YWPZak]

You have onLeft={onLeft} and onRight={onRight} functions, but there is no styling provision (that I could find) for making left and right call-to-actions. that are separated. (The trash icon).

I created a basic hook:

    const [isRight, setRight] = useState(false);
    const [isLeft, setLeft] = useState(false);

    const onLeft = (...args) => {
        setLeft(true);
        setRight(false);
    }
    const onRight = (...args) => {
        setRight(true);
        setLeft(false);
    }

And added classNameTag to the <SwipeToDelete object.

<SwipeToDelete
     key={item.id}
    onLeft={onLeft}
    onRight={onRight}
    classNameTag={isRight ? "is-right" : isLeft ? "is-left" : ""}
>

Then I just created some CSS to override the default CSS behavior:

.list-group{
    padding:15px;
    background-color:#FFF;
    border:2px solid #DDD;
    overflow-y:scroll;
    display:flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    height: calc(100vh - 11rem);
    border-radius: 0.75rem;
    margin-bottom: 30px;
    overflow-x: hidden;
}

.swipe-to-delete.is-right .js-delete {
    background-color: #6fc76f;
    background-image: url('data:image/svg+xml, CUSTOM SVG HERE');
    background-size: 25px 25px;
    background-position: 10px center;
    background-repeat: no-repeat;

    }
.swipe-to-delete.is-left .js-delete {
    background-color: #fd8681;
    background-image: url('data:image/svg+xml, CUSTOM SVG HERE>');
    background-size: 25px 25px;
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
}
.swipe-to-delete .js-delete svg:first-child {
    display:none;
}
.swipe-to-delete .js-delete svg {
    display:none;
}
.swipe-to-delete {
    overflow: visible !important;
}

This allows for two different background colors depending on the swipe direction, and also allows for custom icon based on swipe direction.