Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-easy-marquee
Advanced tools
Readme
A
marquee
component for React using CSS.
A highly customisable marquee
component for React built using CSS. Renders anything given between the tags, be it an image, text or a custom JSX element!
npm install react-easy-marquee
or
yarn add react-easy-marquee
A demo is worth a thousand words!
import Marquee from "react-easy-marquee";
const Example = () => {
const images = ["https://picsum.photos/200", "https://picsum.photos/100"];
return (
<div>
<Marquee duration={10000} background="#fafafa" height="250px">
<h1>I go weee!</h1>
{images.map((image) => (
<img src={image} alt="picsum" />
))}
</Marquee>
</div>
);
};
export default Example;
Name | Description | Type/Values | Required | Default | Example |
---|---|---|---|---|---|
Children | Component that should animate | JSX Element | true | N/A | N/A |
Class Name | Extra classes for the marquee | string | false | N/A | N/A |
Duration | Duration for a loop to run in ms NOTE: It changes with the children | number | false | 5000 | duration={5000} |
Reverse | Direction of the marquee | boolean | false | false | reverse={false} |
Background | Background color of the marquee Accepts any color format as string | string | false | "transparent" | background="#fafafa" background="RGB(250, 250, 250)" |
Height | Height of the marquee | string | false | "5rem" | height="5rem" |
Width | Width of the marquee | string | false | "100%" | width="100%" |
Axis | The axis along which children should move | "X" or "Y" | false | "X" | axis="X" |
Align | Alignment of the children inside the marquee | "start" or "end" | false | "center" | align="end" |
Pause On Hover | Animation to pause when marquee is on hover | boolean | false | false | pauseOnHover={false} |
Many people have contacted us asking if they can use this code for their own websites. The answer to that question is usually "yes", with attribution. There are some cases, such as using this code for a business or something that is greater than a personal project, that we may be less comfortable saying yes to. If in doubt, please don't hesitate to ask us.
We value keeping this site open source, but as you all know, plagiarism is bad. We spent a non-negligible amount of effort developing, designing, and trying to perfect this iteration of our website, and we are proud of it! All we ask is to not claim this effort as your own.
So, feel free to fork this repo. If you do, please just give us proper credit by linking back to this repo, https://github.com/jagnani73/react-easy-marquee. Refer to this handy quora post if you're not sure what to do. Thanks!
react-easy-marquee
is available under the MIT license. See the LICENSE
file for more info.
Please read Contributing.md
for details on our code of conduct, and the process for submitting pull requests to us.
A special thanks to Styled Components
for the inspiration, and SneakySensei
to introducing me to it.
FAQs
A marquee component for React using CSS.
The npm package react-easy-marquee receives a total of 476 weekly downloads. As such, react-easy-marquee popularity was classified as not popular.
We found that react-easy-marquee demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.