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.875remColors
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