apply formatter #14

lib/__tests__/OnScreen.test.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { OnScreen } from '../OnScreen';
+import React from "react";
+import { OnScreen } from "../OnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
 const renderComponent: ComponentRenderer = (settings) => (
   <OnScreen<HTMLDivElement> {...settings}>
     {({ ref, isOnScreen }) => (
-      <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />
+      <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />
     )}
   </OnScreen>
 );
 
-describe('OnScreen', () => {
-  it('OnScreen component renders', createRenderTest(renderComponent));
+describe("OnScreen", () => {
+  it("OnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/__tests__/testUtils.ts

@@ -1,16 +1,16 @@
 /*global expect*/
-import { act, render } from '@testing-library/react';
-import { mockIntersectionObserver } from 'jsdom-testing-mocks';
-import { ReactElement } from 'react';
-import { UseOnScreenParameters } from '../useOnScreen';
+import { act, render } from "@testing-library/react";
+import { mockIntersectionObserver } from "jsdom-testing-mocks";
+import { ReactElement } from "react";
+import { UseOnScreenParameters } from "../useOnScreen";
 
 /**
  * Renders component.
  */
-export type ComponentRenderer = (settings?: Pick<UseOnScreenParameters, 'once'>) => ReactElement;
+export type ComponentRenderer = (settings?: Pick<UseOnScreenParameters, "once">) => ReactElement;
 
-const targetTestId = 'target';
-const targetIsOnScreenTestId = 'target-isOnScreen';
+const targetTestId = "target";
+const targetIsOnScreenTestId = "target-isOnScreen";
 
 const io = mockIntersectionObserver();
 

lib/__tests__/useOnScreen.test.tsx

@@ -1,25 +1,25 @@
-import React, { useRef } from 'react';
-import { useOnScreen, UseOnScreenParameters } from '../useOnScreen';
+import React, { useRef } from "react";
+import { useOnScreen, UseOnScreenParameters } from "../useOnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
-const ComponentTemplate = (props: Pick<UseOnScreenParameters, 'once'>) => {
+const ComponentTemplate = (props: Pick<UseOnScreenParameters, "once">) => {
   const ref = useRef(null);
   const { isOnScreen } = useOnScreen({ ref, ...props });
 
-  return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
+  return <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />;
 };
 
 const renderComponent: ComponentRenderer = (settings) => <ComponentTemplate {...settings} />;
 
-describe('useOnScreen', () => {
-  it('useOnScreen component renders', createRenderTest(renderComponent));
+describe("useOnScreen", () => {
+  it("useOnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/__tests__/withOnScreen.test.tsx

@@ -1,16 +1,16 @@
-import React, { forwardRef } from 'react';
-import { useOnScreen } from '../useOnScreen';
-import { withOnScreen } from '../withOnScreen';
+import React, { forwardRef } from "react";
+import { useOnScreen } from "../useOnScreen";
+import { withOnScreen } from "../withOnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
 const ComponentTemplate = forwardRef<HTMLDivElement, ReturnType<typeof useOnScreen>>(
   function ComponentTemplate({ isOnScreen }, ref) {
-    return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
+    return <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />;
   },
 );
 
@@ -19,10 +19,10 @@ const renderComponent: ComponentRenderer = (settings) => {
   return <WithOnScreen />;
 };
 
-describe('withOnScreen', () => {
-  it('withOnScreen component renders', createRenderTest(renderComponent));
+describe("withOnScreen", () => {
+  it("withOnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/index.ts

@@ -1,6 +1,6 @@
-export { useOnScreen } from './useOnScreen';
-export type { UseOnScreenParameters } from './useOnScreen';
-export { OnScreen } from './OnScreen';
-export type { OnScreenProps } from './OnScreen';
-export { withOnScreen } from './withOnScreen';
-export type { WithOnScreenWrappedComponent } from './withOnScreen';
+export { useOnScreen } from "./useOnScreen";
+export type { UseOnScreenParameters } from "./useOnScreen";
+export { OnScreen } from "./OnScreen";
+export type { OnScreenProps } from "./OnScreen";
+export { withOnScreen } from "./withOnScreen";
+export type { WithOnScreenWrappedComponent } from "./withOnScreen";

lib/internal/index.ts

@@ -1 +1 @@
-export * from './assignRefs';
+export * from "./assignRefs";

lib/useOnScreen.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from "react";
 
 /**
  * UseOnScreen hook settings.

lib/withOnScreen.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, ComponentType, forwardRef, ForwardedRef } from 'react';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import { UseOnScreenParameters, useOnScreen } from './useOnScreen';
-import { assignRefs } from './internal';
+import React, { useRef, ComponentType, forwardRef, ForwardedRef } from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { UseOnScreenParameters, useOnScreen } from "./useOnScreen";
+import { assignRefs } from "./internal";
 
 /**
  * WithOnScreen wrapped component with injected props.
@@ -30,7 +30,7 @@ export type WithOnScreenWrappedComponent<Props extends Record<string, unknown>,>
  */
 export const withOnScreen = <P extends Record<string, unknown>, T extends HTMLElement>(
   WrappedComponent: WithOnScreenWrappedComponent<P>,
-  settings?: Omit<UseOnScreenParameters<T>, 'ref'>,
+  settings?: Omit<UseOnScreenParameters<T>, "ref">,
 ) => {
   const WithOnScreen = (props: P, forwardedRef: ForwardedRef<T>) => {
     const ref = useRef<T>(null);
@@ -42,7 +42,7 @@ export const withOnScreen = <P extends Record<string, unknown>, T extends HTMLEl
   hoistNonReactStatics(WithOnScreen, WrappedComponent);
 
   WithOnScreen.displayName = `WithOnScreen(${
-    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+    WrappedComponent.displayName || WrappedComponent.name || "Component"
   })`;
 
   return forwardRef(WithOnScreen);

package.json

@@ -18,7 +18,7 @@
     "build": "rollup -c",
     "test": "jest",
     "lint": "biome lint ./lib",
-    "format": "biome format --write",
+    "format": "biome format --write ./lib",
     "prepare": "husky install"
   },
   "keywords": [
@@ -65,7 +65,7 @@
     "access": "public"
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": "npm run format"
+    "*.{js,ts,tsx}": "biome format --write"
   },
   "jest": {
     "roots": [