New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-transition-state

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-transition-state - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.d.ts

13

package.json
{
"name": "react-transition-state",
"version": "0.1.0",
"version": "0.2.0",
"description": "Manage react component state transition with ease.",

@@ -11,2 +11,3 @@ "author": "Zheng Song",

"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"files": [

@@ -25,3 +26,5 @@ "dist"

"test": "echo \"Error: no test specified\" && exit 1",
"eg": "npm start --prefix example"
"eg": "npm start --prefix example",
"dtslint": "dtslint --localTs node_modules/typescript/lib types",
"types": "npm run dtslint && cp -f types/index.d.ts dist/"
},

@@ -35,7 +38,9 @@ "peerDependencies": {

"@rollup/plugin-babel": "^5.3.0",
"dtslint": "^4.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^2.56.0",
"rollup-plugin-terser": "^7.0.2"
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.3.5"
}
}
}

@@ -7,7 +7,8 @@ # React-Transition-State

This tiny library was inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group). It allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner:
- Works with both CSS animation and transition.
- NO [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
- Efficient: each state transition results in at most one extract render for your component.
- Tiny in size: ideal for both component libraries and applications.
This library was inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group). It allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner:
- 🍭 Working with both CSS animation and transition.
- 🔄 Moving React components in and out of DOM seamlessly.
- 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
- 🚀 Efficient: each state transition results in at most one extract render for your component.
- 🤏 Tiny in size: ideal for both component libraries and applications.

@@ -55,1 +56,34 @@ ## Install

```
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-basic-100io)**
## API
### `useTransition` Hook
```typescript
function useTransition(options?: TransitionOptions): [
TransitionState,
(toEnter?: boolean) => void,
() => void
];
```
#### Options
Name | Type | Default | Description
------------ | ------------- | ------------- | -------------
`enter` | boolean | true | Enable or disable enter phase transitions
`exit` | boolean | true | Enable or disable exit phase transitions
`preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering'
`preExit` | boolean | | Add a 'preExit' state immediately before 'exiting'
`initialEntered` | boolean | | Begining from 'entered' state
`mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component.
`unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.
`timeout` | number \| <br />{ enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions.
#### Return value
The `useTransition` Hook returns an array of values in the following order:
1. state: 'preEnter' | 'entering' | 'entered' | 'preExit' | 'exiting' | 'exited' | 'unmounted'
2. toggle: (toEnter?: boolean) => void
- If no parameter is supplied, this function will toggle state between enter and exit phases.
- You can set a boolean parameter to explicitly switch into one of the two phases.
3. endTransition: () => void
- Call this function to stop transition which will turn state into 'entered' or 'exited'.
- You will normally call this function in the `onAnimationEnd` or `onTransitionEnd` event.
- You **must** either call this function explicitly in your code or set a timeout value in Hook options.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc