taylor-swift-lyrics/README.md

Provides a react component of Taylor Swift's song's lyrics

��# taylor-swift-lyrics



Generate a customizable React component for Next.js apps of Taylor Swift's song's lyrics.



## NOTES



- The file type of this package is automatically set to commonJS, app that uses type:module will run into an error. I'm trying to work out a solution, as of now this package is limited to Next.js apps.



- So far, songs from Reputation album are the only available songs.



- Overwriting default styles means it will remove the previous default classes.



- Beware of predefined CSS that could prevent the default styles from working. If the default styles are not working, you can just simply overwrite everything.



## HOW TO USE



### Installation



```

npm i taylor-swift-lyrics

```



### Import TaylorSwiftComponent component from the package



```jsx

import TaylorSwiftLyrics from "taylor-swift-lyrics";

```



### Pass the title of the song as a String. All lowercase, replace whitespace with underscore, and omit all quotations.



> example: Don't Blame Me = dont_blame_me



```jsx

// components/SomePage.js

import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	return <TaylorSwiftLyrics song={"so_it_goes"} />;

}



export default SomePage;

```



### Adding custom styles



Adding the **customStyles** prop is optional.



The lyric component is consists of four customizable elements that comes with default styles.



- wrapper: padding = 2rem / 32px



- title: font-size = 1.5rem / 24px, font-weight = 600, margin-bottom = 1.5rem / 24px



- line_container:



- lines: margin-top: 1rem / 16px, margin-bottom: 1rem / 16px



Pass your desired styles as an object to the **customStyles** prop. You can use TailwindCSS utility classes if you have it configured. Visit TailwindCSS [here](https://tailwindcss.com/) to view all available utility classes.



#### Example: Without customStyles prop, will use the default style



```jsx

// components/SomePage.js



import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	return (

		<div>

			<h1>lorem ipsum dolor sit amet</h1>

			<TaylorSwiftLyrics song={"ready_for_it"} />

		</div>

	);

}



export default SomePage;

```



#### Example: With customStyles prop, will overwrite the default style



```jsx

// components/SomePage.js

import "./my-styles.css"; // don't forget to import your css file

import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	return (

		<div>

			<h1>lorem ipsum dolor sit amet</h1>

			<TaylorSwiftLyrics

				song={"end_game"}

				customStyles={{

					wrapper: "custom-wrapper", // class from my-styles.css

					title: "custom-title",

					line_container: "custom-line-container",

					lines: "custom-lines",

				}}

			/>

		</div>

	);

}



export default SomePage;

```



or



```jsx

// Example: With customStyles prop, will overwrite the default style

// components/SomePage.js

import "./my-styles.css"; // don't forget to import your css file

import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	const myStyles = {

		wrapper: "custom-wrapper", // class from my-styles.css

		title: "custom-title",

		line_container: "custom-line-container",

		lines: "custom-lines",

	};



	return (

		<div>

			<h1>lorem ipsum dolor sit amet</h1>

			<TaylorSwiftLyrics

				song={"end_game"}

				customStyles={myStyles}

			/>

		</div>

	);

}



export default SomePage;

```



or if you just want to overwrite one customizable element,



```jsx

// components/SomePage.js

import "./my-styles.css"; // don't forget to import your css file

import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	return (

		<div>

			<h1>lorem ipsum dolor sit amet</h1>

			<TaylorSwiftLyrics

				song={"end_game"}

				customStyles={{

					title: "custom-title", // overwrite default styles of title, the rest will retain their default styles

				}}

			/>

		</div>

	);

}



export default SomePage;

```



If you have TailwindCSS configured, you can use Tailwind utility classes instead.



```jsx

// components/SomePage.js

import TaylorSwiftLyrics from "taylor-swift-lyrics";



function SomePage() {

	return (

		<div>

			<h1>lorem ipsum dolor sit amet</h1>

			<TaylorSwiftLyrics

				song={"end_game"}

				customStyles={{

					wrapper: "p-8 bg-emerald-800",

					title: "text-3xl font-semibold text-neutral-100",

				}}

			/>

		</div>

	);

}

```



## Expected result with default styles



![Lyric Component Example](public/images/screencapture-localhost-3000-2024-01-20-11_52_39.png)



## Non-profitable and has no connection to Taylor Swift