Skip to content

Commit ca3b44d

Browse files
committed
fix: temporary make it WIP
1 parent 79bcccb commit ca3b44d

File tree

2 files changed

+2
-222
lines changed

2 files changed

+2
-222
lines changed

README.md

Lines changed: 1 addition & 221 deletions
Original file line numberDiff line numberDiff line change
@@ -1,221 +1 @@
1-
# react-transitioning
2-
3-
[![npm](https://img.shields.io/npm/v/react-transitioning.svg)](https://www.npmjs.com/package/react-transitioning)
4-
[![GitHub](https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white)](https://github.com/fakundo/react-transitioning)
5-
6-
A simple React library that provides components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. The library is inspired by [react-transition-group](https://reactcommunity.org/react-transition-group/) and shares a similar API with a few notable differences.
7-
8-
## Key Features
9-
10-
- **Ease of Use**: Simple and intuitive API for creating animations and transitions for both components and groups of elements.
11-
- **Modern Approach**: Built with functional components and hooks, avoiding deprecated methods like `findDOMNode`.
12-
- **No External Dependencies**: No additional dependencies, keeping your project lightweight and reducing potential conflicts.
13-
- **No `nodeRef` Required**: Unlike `react-transition-group`, there's no need to pass a `nodeRef` prop.
14-
- **Flexibility**: Supports both CSS-based and inline style-based animations.
15-
- **Lightweight**: Minimal bundle size to keep your application fast.
16-
17-
The library provides components that allow you to easily create custom components with animations and transitions tailored to your needs. You can integrate them into your own React components to add smooth animations and transitions with minimal effort.
18-
19-
```tsx
20-
<FadeTransition in={visible}>
21-
<div>Fading element</div>
22-
</FadeTransition>
23-
```
24-
25-
## Installation
26-
27-
To install the library, run:
28-
29-
```bash
30-
npm install react-transitioning
31-
# or
32-
yarn add react-transitioning
33-
```
34-
35-
## Documentation
36-
37-
For more detailed information and usage examples, check out the [Docs](https://fakundo.github.io/react-transitioning/).
38-
39-
## Usage
40-
41-
### Transition Component
42-
43-
The `Transition` component allows you to control the mounting and unmounting of an element with transitions.
44-
45-
```tsx
46-
import { Transition } from 'react-transitioning'
47-
48-
...
49-
50-
<Transition in={!hidden} appear exit={false}>
51-
{(transitionState) => (
52-
<pre>{JSON.stringify(transitionState)}</pre>
53-
)}
54-
</Transition>
55-
```
56-
57-
### CSSTransition Component
58-
59-
The `CSSTransition` component applies CSS classes based on the current transition state.
60-
61-
```tsx
62-
import { CSSTransition } from 'react-transitioning'
63-
64-
...
65-
66-
<CSSTransition in={!hidden} classNames="fade">
67-
<div>Animated element</div>
68-
</CSSTransition>
69-
```
70-
71-
### StyleTransition Component
72-
73-
The `StyleTransition` component applies inline styles based on the current transition state. This is useful for customizing transitions without needing to rely on external CSS.
74-
75-
```tsx
76-
import { StyleTransition } from 'react-transitioning'
77-
78-
...
79-
80-
<StyleTransition
81-
in={!hidden}
82-
duration={300}
83-
styles={{
84-
enter: { opacity: 0 },
85-
enterActive: { opacity: 1 },
86-
}}
87-
>
88-
<div style={{ transition: 'opacity 300ms' }}>Animated element</div>
89-
</StyleTransition>
90-
```
91-
92-
### TransitionGroup Component
93-
94-
The `TransitionGroup` component handles a set of elements, animating them as they are added or removed from the DOM.
95-
96-
```tsx
97-
import { TransitionGroup } from 'react-transitioning'
98-
99-
...
100-
101-
<TransitionGroup duration={300}>
102-
{items.map((item) => (
103-
<CSSTransition key={item.key} classNames="fade">
104-
<div>{item.label}</div>
105-
</CSSTransition>
106-
))}
107-
</TransitionGroup>
108-
```
109-
110-
### Detecting Transition End:
111-
112-
```tsx
113-
<CSSTransition
114-
in={!hidden}
115-
classNames="fade"
116-
addEndListener={(phase, done) => {
117-
nodeRef.current.addEventListener('transitionend', done, { once: true, capture: false })
118-
}}
119-
>
120-
<div ref={nodeRef}>Animated element</div>
121-
</CSSTransition>
122-
```
123-
## API
124-
125-
### Transition Props
126-
127-
```ts
128-
type TransitionProps = {
129-
children: (transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode;
130-
in?: boolean;
131-
appear?: boolean;
132-
enter?: boolean;
133-
exit?: boolean;
134-
duration?: number;
135-
alwaysMounted?: boolean;
136-
addEndListener?: (phase: TransitionPhase, done: () => void) => void;
137-
onEnter: () => void;
138-
onEntering: () => void;
139-
onEntered: () => void;
140-
onExit: () => void;
141-
onExiting: () => void;
142-
onExited: () => void;
143-
}
144-
```
145-
146-
The `TransitionState` passed to the children function has the following structure:
147-
148-
```ts
149-
type TransitionState = {
150-
appear: boolean;
151-
appearActive: boolean;
152-
appearDone: boolean;
153-
enter: boolean;
154-
enterActive: boolean;
155-
enterDone: boolean;
156-
exit: boolean;
157-
exitActive: boolean;
158-
exitDone: boolean;
159-
}
160-
```
161-
162-
### CSSTransition Props
163-
164-
```ts
165-
type CSSTransitionProps = Omit<TransitionProps, 'children'> & {
166-
children: React.ReactElement<{ className?: string }>
167-
classNames: string | {
168-
appear?: string;
169-
appearActive?: string;
170-
appearDone?: string;
171-
enter?: string;
172-
enterActive?: string;
173-
enterDone?: string;
174-
exit?: string;
175-
exitActive?: string;
176-
exitDone?: string;
177-
}
178-
}
179-
```
180-
181-
if `classNames` is a string, then the computed `className` will be suffixed based on the current transition state.
182-
For example, when `classNames` is `"fade"`, the `fade-appear-active` class will be applied during the `appearActive` phase.
183-
184-
If `classNames` is an object, the final `className` will be taken from that object based on the current transition state.
185-
186-
### StyleTransition Props
187-
188-
```ts
189-
type StyleTransitionProps = Omit<TransitionProps, 'children'> & {
190-
children: React.ReactElement<{ style?: React.CSSProperties };
191-
styles: {
192-
appear?: object;
193-
appearActive?: object;
194-
appearDone?: object;
195-
enter?: object;
196-
enterActive?: object;
197-
enterDone?: object;
198-
exit?: object;
199-
exitActive?: object;
200-
exitDone?: object;
201-
}
202-
}
203-
```
204-
205-
The `styles` prop allows you to define inline styles based on the current transition state. For example, when the element enters, the `enterActive` styles will be applied.
206-
207-
### TransitionGroup Props
208-
209-
```ts
210-
type TransitionGroupProps = {
211-
children: React.ReactNode;
212-
appear?: boolean;
213-
enter?: boolean;
214-
exit?: boolean;
215-
duration?: number;
216-
}
217-
```
218-
219-
## License
220-
221-
MIT
1+
WIP;

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-transitioning",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "React components for easily implementing basic CSS animations and transitions",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.esm.js",

0 commit comments

Comments
 (0)