useismouse v1.0.12

react-useismouse

Super simple module to conditionally do stuff based on whether the user is using their mouse or keyboard.

Main use-case is when you want to use outline: none but don't want to ruin accessibility for people tabbing between fields.

npm i useismouse

import useIsMouse from 'useismouse';

function App() {
  const isMouse = useIsMouse();
  return <div>{isMouse ? 'Using mouse' : 'Using keyboard'}</div>;
}

However you use it is up to you. But with styled-components it could be done as thus:

import { styled, ThemeProvider } from 'styled-components';
import useIsMouse from 'useismouse';

const StyledDiv = styled.div`
  ${({ theme }) => theme.isMouse && 'outline: none;'}
`;

function App() {
  const isMouse = useIsMouse();
  return (
    <ThemeProvider theme={{ isMouse }}>
      <StyledDiv>Foo bar</StyledDiv>
    </ThemeProvider>
  );
}

Or globally:

import { styled, css, createGlobalStyle } from 'styled-components';
import useIsMouse from 'useismouse';

const GlobalStyle = createGlobalStyle`
  ${({ theme }) => {
    if (theme.isMouse) {
      return css`
        * {
          outline: none;
        }
      `;
    }
  }}
`;

function App() {
  const isMouse = useIsMouse();
  return (
    <ThemeProvider>
      <GlobalStyle />
      <div>Foo bar</div>
    </ThemeProvider>
  );
}

Please take caution with the above approach, however, as it can cause needless re-renders of the entire React tree on keypress or click. A better option would be to use it in each individual button and input component.