[email protected]

Do you want to make your cool code shorts public? Just use:

yarn add codememe2share

or

npm install codememe2share

Example:

Flexible container with gradient background and apple dots

  // components
  import MemeShare, { Container, AppleDots } from "codememe2share";

  <MemeShare>
    <Container>
      <AppleDots />
        Put your code here
    </Container>
  </MemeShare>

Note: If you don't set the background it will take random gradient background

How to add a simple Container component?

  // components
  import Container from "codememe2share/components/Container";

  <Container>
    Hola Mundo
  </Container>

Typography

Font

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

Font-Size

Based on MUI Typography

Colors

Gradient

Based on Gradient Backgrounds - Rainbow The Best Gradient Sites All In One Place

Apple dots

.red svg {
  color: #ff5d56;
}

.yellow svg {
  color: #f7c127;
}

.green svg {
  color: #2bcb45;
}

Complete example

import React from "react";

// components
import MemeShare, { Container, AppleDots, Title, Rotate } from "codememe2share";

// images
import react from "./assets/images/logo512.png";

const Template = () => {
  return (
    <MemeShare background="random">
      <Container>
        <AppleDots />
        <Title style={{ margin: 10 }} variant="h4">
          Code Meme to Share
        </Title>
        <Rotate className="flex justify-content-center align-items-center">
          <img src={react} style={{ width: 150 }} alt="react-logo" />
        </Rotate>
      </Container>
    </MemeShare>
  );
};

export default Template;

Preview

Additional Features

• Loading Flexible loading container for loading loops
  • Spinner Rotating spinner
• Container Flexible container component
  • Rotate Container with rotation animation
• Notification Floating container to show notifications
• Title Based on MUI Typography title component
• Paragraph Based on MUI Typography body component
  • CodeArea Beta Colorized code for everyone
• Button Flexible button component
  • FileButton Button to load some file
  • LinkButton Link button
• Icons from React Icons
• Gradients Prefab gradients from Gradient Backgrounds - Rainbow The Best Gradient Sites All In One Place