fix: improve confused error messages

example/src/App.js

@@ -4,7 +4,7 @@ import useBreakpoints from 'usebreakpoints'
 const App = () => {
   const breakpoints = [576, 768, 992, 1200]
 
-  const stringBreakpoints = ['576px', '768lol', '992px', '1200px']
+  const stringBreakpoints = ['576px', '768px', '992px', '1200px']
 
   const [value, breakpoint] = useBreakpoints([1, 2, 3, 4], breakpoints)
 

src/utils/__tests__/isValidUnit.test.ts

@@ -8,6 +8,13 @@ describe('Validates breakpoint strings with units', () => {
     )
   })
 
+  it('Should throw an error if an invalid CSS unit is provided', () => {
+    expect(() => isValidUnit('1000')).toThrowError(`
+        Breakpoint "1000" does not have a valid length unit.
+        Did you mean to add cm | mm | in | px | pt | pc | em | ex | ch | rem | vw | vh | vmin | vmax | % ?
+      `)
+  })
+
   it('Should return true if a valid CSS is provided', () => {
     expect(() => isValidUnit('1000px')).toBeTruthy()
   })

src/utils/isValidUnit.ts

@@ -15,9 +15,22 @@ const units: string[] = [
   'vmax',
   '%'
 ]
+
 export default function isValidUnit(breakpoint: string) {
   const unit: string[] = breakpoint.match(/(\D+)/g) || ['']
 
+  /**
+   * @todo: Customize the Erro output
+   * to point to the right file and file number
+   * in the stack trace
+   */
+  if (unit[0] === '') {
+    throw new Error(`
+        Breakpoint "${breakpoint}" does not have a valid length unit.
+        Did you mean to add ${units.join(' | ')} ?
+      `)
+  }
+
   if (!units.includes(unit[0])) {
     throw new Error(`"${unit}" is not a valid CSS unit.`)
   }