Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/felipethome/react-inline-transition-group
React component that helps to control CSS transitions defined with inline style.
https://github.com/felipethome/react-inline-transition-group
animation inline-styles react reactcsstransitiongroup
Last synced: about 3 hours ago
JSON representation
React component that helps to control CSS transitions defined with inline style.
- Host: GitHub
- URL: https://github.com/felipethome/react-inline-transition-group
- Owner: felipethome
- License: bsd-3-clause
- Created: 2016-05-20T02:42:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-19T18:25:15.000Z (almost 6 years ago)
- Last Synced: 2024-11-14T09:19:11.895Z (3 days ago)
- Topics: animation, inline-styles, react, reactcsstransitiongroup
- Language: JavaScript
- Homepage:
- Size: 1.12 MB
- Stars: 43
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Inline Transition Group
This component helps you to control transitions defined with inline styles. Built with [ReactTransitionHooks](https://github.com/felipethome/react-transition-hooks), the goal is to supply a more up-to-date alternative to [ReactCSSTransitionGroup](https://facebook.github.io/react/docs/animation.html).
[](https://travis-ci.org/felipethome/react-inline-transition-group) [](https://coveralls.io/github/felipethome/react-inline-transition-group)
## Advantages
* You don't need to decouple your styles from the component.
* You don't need to supply timeout properties as in *ReactCSSTransitionGroup*.
* You have callbacks to control the start and end of your transitions for each child.
* *ReactCSSTransitionGroup* uses timeouts to control the animations which means some situations can break its behavior, like in frame rates lower than 60fps.
* *ReactCSSTransitionGroup* uses *ReactTransitionGroup* which means you can't interrupt animations.
## Live Demo
Check out the [demo](http://felipethome.github.io/react-inline-transition-group/).
## How to install
npm install react-inline-transition-group
## How to use
Import the component to your project and then wrap the nodes you want to control the transition with it. Example:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Transition from 'react-inline-transition-group';
export default class Demo extends React.Component {
constructor() {
super();
this.state = {count: 1};
}
handleAdd = () => {
this.setState((previousState) => {
return {count: previousState.count + 1};
});
};
handleRemove = () => {
this.setState((previousState) => {
return {count: Math.max(previousState.count - 1, 0)};
});
};
handlePhaseEnd = (phase, id) => {
if (phase === 'leave') console.log(id + ' left');
};
render() {
const styles = {
container: {
width: '500px',
},
base: {
width: '100%',
height: '50px',
background: '#4CAF50',
opacity: 0,
},
appear: {
opacity: 1,
transition: 'all 500ms',
},
leave: {
opacity: 0,
transition: 'all 250ms',
},
custom: {
background: '#3F51B5',
},
};
const elems = [];
// Don't forget that for most React components use array indexes as
// keys is a bad idea (but not for this example).
for (let i = 0; i < this.state.count; i++)
elems.push(
{i});
return (
Add
Remove
{elems}
);
}
}
ReactDOM.render(, document.getElementById('container'));
```
Notice above that `{elems}` are *divs*, but they could be any other React component, just remember to pass the property *style* that your React component is receiving down to the HTML element that will get these styles. Example:
```jsx
const SomeComponent = (props) => (
{props.children}
);
const App = () => {
const elems = [];
// Don't worry, you can still apply custom styles to each element.
const otherStyle = { ... };
for (let i = 0; i < this.state.count; i++)
elems.push({i});
return (
{elems}
);
};
```
## Properties
Property name | Description
------------ | -------------
**component** | String. The component that will wrap all the children. Default: `div`.
**childrenStyles** | Object. This object has the properties: `base`, `appear`, `enter` and `leave`. Each of these properties is another object containing the styles for the respective phase. The `base` styles are applied to all children in all phases.
**onPhaseStart** | Function. Callback that will be called with the current phase (`appear`, `enter` or `leave`) and the child `id` when the phase begins, in this order.
**onPhaseEnd** | Function. Callback that will be called with the current phase (`appear`, `enter` or `leave`) and the child `id` when the phase ends, in this order.
### Notes
1. You can pass an `id` property to your children components and the callback will be called with it so you know exactly for which child the event happened. This `id` is optional.
2. The `onPhaseStart` callback will be called sooner a node is being added or removed to/from the group. If you have a delay in your CSS transition the component will not wait until the delay is complete to call the callback.
3. The `onPhaseEnd` callback will be called when the longest transition time (delay + duration) completes. Notice that if a transition is interrupted this callback will not be called.
## What is meant by phase
There are three phases in this component (the same as in ReactCSSTransitionGroup):
* **appear**: happens to any child component that is already inside of ReactInlineTransitionGroup at the moment of its creation, or in other words, at the time the ReactInlineTransitionGroup component just mounted.
* **enter**: happens to any child component that is inserted in ReactInlineTransitionGroup after its creation.
* **leave**: happens to any child component that is being removed from ReactInlineTransitionGroup.
## LICENSE
BSD-3