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-cascading-styles

v0.0.4

Published

This is a StyleSheet library that provides users with a StyleLibrary that mimics modern class based styles with CSS. This package also delivers a 'barely styled' component library, built with the same cascading style "classes".

Downloads

3

Readme

React Native Cascading Styles, Components, and Animation Library

Are you tired of juggling multiple libraries for styling, components, and animations in your React Native projects? Say hello to react-native-cascading-styles – your all-in-one solution for streamlined development! 🎉

Let's dive into the magic of StyleLibrary! No more hassle with class names – our inline style approach ensures lightning-fast performance. With descriptive names and cascading styles, you'll breeze through styling like never before. Need to customize? Inject your own styles effortlessly, creating predictable and polished designs every time.

But wait, there's more! Our components are the epitome of simplicity and flexibility. Take control of every style and function with ease. Want to add a personalized touch? Inject your own renderItems and watch your creations come to life! Whether it's a simple tooltip or a complex interactive element, our components empower you to build with speed and precision.

And let's not forget about animations! With our hooks, you'll wield unparalleled control over your animations, fine-tuning every detail to perfection. But if speed is your game, our animated components have got you covered. Wrap your components in sleek, animated views with just a few lines of code – it's that easy!

So why juggle multiple libraries when you can have it all with react-native-cascading-styles? Say goodbye to complexity and hello to seamless development. With our comprehensive solution, you'll conquer React Native like a pro, delivering stunning apps with confidence and ease. Try it out today and experience the difference for yourself! ✨

For more documentation on usage, go here Usage

Installation

npm install react-native-cascading-styles

Usage

Styles

You can pass a structured array to a component to apply the styles from the style library:

import { StyleLibrary } from 'react-native-cascading-styles';

return <View style={[StyleLibrary.ClassName1, StyleLibrary.ClassName2]}></View>;

Components

Import and use components from the library.

import { Component } from 'react-native-cascading-styles';

return <Component prop1="value1" />;

Animation

Using Animation Hooks

Hooks provide a simplified interface for creating animations. This method is useful if you want to integrate animations directly with your own components for more control and uniformity.

import React from 'react';
import { View, Button } from 'react-native';
import { useAnimation } from 'react-native-cascading-styles';

const MyAnimatedComponent = () => {
  const { animation, startAnimation } = useAnimation();

  return (
    <View style={animation}>
      <Button title="Animate" onPress={startAnimation} />
    </View>
  );
};

Using Animiation Components

Animation components wrap your components and manage the necessary props to simplify the usage of animations. This approach is slightly more restrictive but much easier to implement for common use cases.

import React from 'react';
import { AnimatedComponent } from 'react-native-cascading-styles';

const MyComponent = () => {
  return (
    <AnimatedComponent>
      <YourComponent />
    </AnimatedComponent>
  );
};