Overview:

react-foaas-card is a react component that allows users to create offensive sample cards. It is designed to be offensive and includes features such as customizable subtitles, material card styles, and the option to include a middle finger emoji.

Features:

• Type prop: allows users to specify the type of offensive message to display on the card. Examples include “How to tell someone to fuck off” or “horse”.
• From prop: allows users to specify the subtitle of the card, which is typically an italicized message. Example: “Kevin”.
• Classes prop: allows users to customize the styles of the material card.
• Raised prop: determines whether or not to provide shadowing to the card.
• DarkMode prop: inverts the text and background color.
• SubtitleStyles prop: allows users to customize the styles of the subtitles on the card.
• MiddleFinger prop: determines whether or not to include a middle finger emoji on the card.
• MiddleFingerStyles prop: allows users to customize the styles of the span containing the middle finger emoji.

Installation:

To install the react-foaas-card component, follow these steps:

1. Open your terminal and navigate to your project directory.
2. Run the following command to install the react-foaas-card package from npm:

npm install react-foaas-card

3. Import the component in your React project:

import ReactFoaasCard from 'react-foaas-card';

4. Use the component in your code. Here’s an example:

<ReactFoaasCard 
  type="How to tell someone to fuck off" 
  from="Kevin"
  classes={{/* color: 'red' */}}
  raised={true}
  darkMode={false}
  subtitleStyles={{/* fontWeight: 'lighter', fontStyle: 'italic' */}}
  middleFinger={true}
  middleFingerStyles={{/* fontSize: '30px' */}}
/>

Summary:

react-foaas-card is a react component that allows users to create offensive sample cards. It provides several customizable features, such as the type of offensive message, a customizable subtitle, material card styles, and the option to include a middle finger emoji. Users can install the component using npm and pass in the desired props to customize the appearance of the card.