CodeMeme2Share@1.12.14

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

h1. Heading 6rem

h2. Heading 3.75rem

h3. Heading 3rem

h4. Heading 2.125rem

h5. Heading 1.5rem

h6. Heading 1.25rem

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. 1rem

BUTTON TEXT 0.875rem

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