src/Hooks/useSwipeable.tsx and then import to App.tsx?

[joki20]

Beginner question: I am trying to place hooks in a separate folder src/Hooks but I have problem in using react-swipeable doing so. This is what I have right now, but nothing is happening.

src/Hooks/useSwipeable.tsx

import { useSwipeable } from 'react-swipeable';

const UseSwipeable = () => (
    useSwipeable({
        onSwiped: (e) => console.log("User Swiped!", e)
    })
);

export default UseSwipeable

App.tsx

import React from 'react';
import './App.css';

// HOOKS
import UseSwipeable from './Hooks/useSwipeable';

function App() {
    return (
        <div {...UseSwipeable} className="App">

        </div>
    );
}

export default App;

Would love to achieve this, but don't know what is wrong?

[hartzis]

@joki20 I'd recommend taking a look at the examples a bit more and seeing how they are utilizing useSwipeable.

• Here is a link to the exact usage in our examples in codesandbox
  • useSwipeable usage

In your provided example it would look something more like this

import React from 'react';
import { useSwipeable } from 'react-swipeable';
import './App.css';

function App() {
    const handlers = useSwipeable({
        onSwiped: (e) => console.log("User Swiped!", e)
    })
    return (
        <div {...handlers} className="App">

        </div>
    );
}

export default App;