npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-perfect-marquee

v1.1.98

Published

React Native Perfect Marquee is a extremely lightweight React Native component that harnesses silky smooth marquees

Downloads

45

Readme

React Native Perfect Marquee is a lightweightReact Native component that harnesses silky smooth marquees for both ANDROIDos and Ios.

This React Native Perfect Marquee component allows text to scroll smoothly in both directions (left to right or right to left). It supports both a single title and looped title, offering a seamless, customizable animation with various dynamic properties.

Usage

To use the component, first import Marquee into your file:

import Marquees from  "react-native-perfect-marquee";
Then wrap the <Marquees> tags around any component or text you'd like to slide.
  
  <Marquees 
      textColor={'red'}
      fontWeight={'900'}
      fontFamily={Rubik}
      fontSize={32}
       autofill ={true}  or just write autofill
      marqueeDirection={'left'}  OR {'right}
      marqueeSpeed={10}
      title={'ENTER YOUR TEXT HERE'}
      letterSpacing={5}
      backgroundColor={'black'}
      marginTop={10}
      marginBottom={10}
      padding={22}
      />

A sample file might look like this:

 import React from "react";
 import { View } from "react-native";
 import Marquees from  "react-native-perfect-marquee";
 const App =({data})=>{ 
   return
    ( 
     
   <Marquees 
  textColor={data?.style?.text_color}  //you can also use it dynamically
  fontWeight={data?.style?.fontWeight}
  textColor={'red'}
      fontWeight={'900'}
      fontFamily={Rubik}
      fontSize={32}
       autofill ={true}  or just write autofill
      marqueeDirection={'left'}  OR {'right}
      marqueeSpeed={10}
      title={'ENTER YOUR TEXT HERE'}
      letterSpacing={5}
      backgroundColor={'black'}
      marginTop={10}
      marginBottom={10}
      padding={22}
                />
            />
        
        )
      }
      export default App;

| Prop | Description | Value | Example | |-------------------|--------------------------------------------------------------|-------------------|----------------------------| | textColor |Customize the color of the scrolling text. | string | textColor={'green'} | | fontWeight |Control the font weight of the scrolling text. | '900' | fontWeight={'900'} | | fontFamily |Specify the font family for the title text. | string | fontFamily={'Arial'} | | fontSize |Adjust the font size of the title text. | 32 | fontSize={32} | | autofill |Automatically adjusts the text width for smooth scrolling. | boolean | autofill={true} | | marqueeDirection|Set the scroll direction of the marquee, either left or right.| 'left' | 'right' | marqueeDirection={'left'}| | marqueeSpeed |Control the speed of the scrolling text. |10 to 100 |marqueeSpeed={10} | |title |The actual text content that will scroll in the marquee. |string |title={'Marquee'} | |letterSpacing |Define the spacing between letters of the scrolling text. |1 to 5 |letterSpacing={2} | |backgroundColor|Set the background color of the marquee. |string |backgroundColor={'red'} | |marginTop |Add margin to the top of the marquee. |number |marginTop={10} | |marginBottom |Add margin to the bottom of the marquee. |number |marginBottom={10} | |padding |Add padding around the content inside the marquee. |number |padding={10}` |

Support Me on PayPal Or GooglePay

Welcome help me to build this awesome lib.

[PayPal]

Or via Google Pay:

UPI-- deepak142verma@okaxis

Any amount appreciated