feat: short name for package component

README.md

@@ -34,12 +34,12 @@ pnpm add react-youtube-lite
 ## 📚 Usage
 
 ```tsx
-import { ReactYouTubeLite } from 'react-youtube-lite';
+import { YouTubeLite } from 'react-youtube-lite';
 
 // Full URL
 const App = () => {
   return (
-    <ReactYouTubeLite
+    <YouTubeLite
       url="https://www.youtube.com/watch?v=DVQTGidS1yk"
       title='React and the Music Industry | Jameyel "J. Dash" Johnson'
     />
@@ -49,16 +49,13 @@ const App = () => {
 // Short URL
 const App = () => {
   return (
-    <ReactYouTubeLite
-      url="https://youtu.be/DVQTGidS1yk"
-      title='React and the Music Industry | Jameyel "J. Dash" Johnson'
-    />
+    <YouTubeLite url="https://youtu.be/DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />
   );
 };
 
 // ID
 const App = () => {
-  return <ReactYouTubeLite url="DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />;
+  return <YouTubeLite url="DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />;
 };
 ```
 

example/src/app.tsx

@@ -1,10 +1,10 @@
 // Dependencies
-import { ReactYouTubeLite } from '../../src';
+import { YouTubeLite } from '../../src';
 
 export function App() {
   return (
     <div>
-      <ReactYouTubeLite
+      <YouTubeLite
         url="https://www.youtube.com/watch?v=DVQTGidS1yk"
         title='React and the Music Industry | Jameyel "J. Dash" Johnson"'
       />

src/react-youtube-lite/index.tsx

@@ -6,9 +6,9 @@ import { StyledAspectRatio, StyledIframe, StyledYouTubeIcon } from './react-yout
 import { addPrefetch } from '../utils/add-prefetch';
 import { getSrcSearch } from '../utils/get-src-search';
 import { getYouTubeId } from '../utils/get-youtube-id';
-import type { ReactYouTubeLiteProps } from '../types';
+import type { YouTubeLiteProps } from '../types';
 
-function RenderReactYouTubeLite(
+function RenderYouTubeLite(
   {
     url,
     adNetwork,
@@ -22,7 +22,7 @@ function RenderReactYouTubeLite(
     poster = 'hqdefault',
     title,
     ...props
-  }: ReactYouTubeLiteProps,
+  }: YouTubeLiteProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   let [preconnected, setPreconnected] = React.useState(false);
@@ -91,6 +91,6 @@ function RenderReactYouTubeLite(
   );
 }
 
-const ReactYouTubeLite = React.forwardRef(RenderReactYouTubeLite);
+const YouTubeLite = React.forwardRef(RenderYouTubeLite);
 
-export { ReactYouTubeLite };
+export { YouTubeLite };

src/types/index.ts

@@ -12,7 +12,7 @@ interface IframeProps extends React.ComponentPropsWithoutRef<'iframe'> {
   css?: Stitches.CSS;
 }
 
-interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
+interface YouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * This can be either an url to a video or a video ID.
    */
@@ -82,4 +82,4 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   title?: string;
 }
 
-export { IframeProps, PosterQuality, ReactYouTubeLiteProps };
+export { IframeProps, PosterQuality, YouTubeLiteProps };