open-index/open-npm huggingface dataset:
npm package: @monynethala/animatepresence
Description: A component to animate while mounting/unmounting.
Latest version: 1.0.0


A component to animate while mounting/unmounting.

uses web animation api


## Install

```sh
yarn add animatepresence 
# or
npm install animatepresence 
```



## Basic Usage


```tsx
import { useState } from "react";
import "./styles.css";
import motion from "./motion";
import { AnimatePresence } from "./animatePresence";
export default function App() {
  const [show, setShow] = useState(true);

  return (
    <>
      <button
        onClick={() => {
          setShow(!show);
        }}
      >
        show
      </button>
      <AnimatePresence initial={false}>
        {show && (
          <motion.div
            leave={{ opacity: [1, 0] }}
            enter={{ opacity: [0, 1] }}
            className="App"
            key="home"
          >
            
            <h2>stop stalking me</h2>
          </motion.div>
        ) }
      </AnimatePresence>
    </>
  );
}
```


## License

MIT
npm package: @monynethala/use-state-values
Description: A react hook which provides simple abstraction over state to push state updates to  leaf components
Latest version: 1.0.0

# Use-State-Values

A react hook which provides simple abstraction over state to push state updates to  leaf components

create state anywhere and render the state only in the components which depend on it

## Installation

```sh
npm install @monynethala/useStateValues

```


## Api

```js
class StateValue<V = any> {
    private current;
    private prev;
    private readonly subscribers;
    constructor(initialValue?: V);
    get(): V | undefined;
    set(current: V | ((prevValue: V) => V)): V;
    subscribe(updater: Updater<V>, call?: boolean): () => void;
    unsubscribe(updater: Updater<V>): void;
    getPrevious(): V | undefined;
    private notifySubscribers;
}

type StateValues<T extends object> = {
    [K in keyof T]: T extends StateValue<infer U> ? T : StateValue<T>;
};

type Valid<T> = {
     [P in keyof T]: T[P] extends Primitive | StateValue<any> ? T[P] : never;
 };

function useStateValues<T extends Valid<T>>(initialValue: T): [StateValueState<T>, StateValues<T>];

```

# Basic Usage

```jsx

import useStateValues from '@monynethala/useStateValues'

function App() {
const Nested = ({ prop }: { prop: StateValue<number> }) => {
  
  const [renderState, stateValues] = useStateValues({ x: prop });
  const { x } = renderState;
  return (
      <div>{x}</div>
  );
};

export default function App() {
  const [renderState, stateValues] = useStateValues({ x: 0, y: "mony" });

  // Destructure renderState to convert StateValue to state
  const { x } = renderState;

  const intervalRef = useRef<number | undefined>();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      values.y.setCurrent((x) => x + 1);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

 // Component rerenders only when the 'x' changes

  return (
    <div className="App">
      <div>{x}</div>
      <Nested prop={values.y} />
    </div>
  );
}


```