Skip to content

Commit 3457129

Browse files
iamyokiiamyoki
committed
docs: update readme
1 parent 745566a commit 3457129

File tree

1 file changed

+6
-194
lines changed

1 file changed

+6
-194
lines changed

‎README.md‎

Lines changed: 6 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</p>
44

55
<br />
6-
<h1 align="center">📦 qhlab-library-template</h1>
6+
<h1 align="center">🎁 qhlab-library-template</h1>
77

88
<p align="center">
99
<a href="https://github.com/iamyoki/transition-hook/actions/workflows/test.yml"><img src="https://github.com/iamyoki/transition-hook/actions/workflows/test.yml/badge.svg" alt="🧪 Run Tests"></a>
@@ -16,224 +16,36 @@
1616
</a>
1717
</p>
1818

19-
<p align="center">An extremely light-weight<strong>(1kb)</strong> react transition animation hook which is simpler and easier to use than <a href="https://github.com/reactjs/react-transition-group" target="_blank">react-transition-group</a></p>
2019
<br>
21-
<p align="center">!!!(This template is forked from transition-hook, edit your own content later on)</p>
22-
23-
<p align="center">
24-
<a href="https://o3f41.csb.app/ripple-effect">
25-
<img src="./gifs/ripple-effect.gif" height="150" alt="example">
26-
</a>
27-
<a href="https://o3f41.csb.app/emoji-switch-transition">
28-
<img src="./gifs/emoji-switch-transition.gif" height="150" alt="example">
29-
</a>
30-
</p>
31-
32-
<p align="center">
33-
<a href="https://o3f41.csb.app/radio-transition">
34-
<img src="./gifs/radio-transition.gif" height="150" alt="example">
35-
</a>
36-
<a href="https://o3f41.csb.app/painter">
37-
<img src="./gifs/painter.gif" height="150" alt="example">
38-
</a>
39-
</p>
40-
41-
<p align="center">
42-
<a href="https://o3f41.csb.app/basic">
43-
<img src="./gifs/basic.gif" height="120" alt="example">
44-
</a>
45-
<a href="https://o3f41.csb.app/basic-switch-transition">
46-
<img src="./gifs/basic-switch-transition.gif" height="120" alt="example">
47-
</a>
48-
<a href="https://o3f41.csb.app/transition-with-key">
49-
<img src="./gifs/transition-with-key.gif" height="120" alt="example">
50-
</a>
51-
</p>
52-
53-
<p align="center">
54-
<a href="https://codesandbox.io/s/transition-hook-examples-o3f41">See More Examples in Codesandbox</a>
55-
</p>
20+
<p align="center"><strong>A template make make open-source library never been so easy.</strong></p>
5621
<br>
5722

5823
- [Installation](#installation)
5924
- [Usage](#usage)
60-
- [useTransition](#usetransition)
61-
- [useSwitchTransition](#useswitchtransition)
62-
- [Transition](#transition)
63-
- [SwitchTransition](#switchtransition)
6425
- [API Reference](#api-reference)
65-
- [useTransition(state, timeout)](#usetransitionstate-timeout)
66-
- [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)
67-
- [Transition](#transition-1)
68-
- [SwitchTransition](#switchtransition-1)
6926
- [License](#license)
7027

7128
## Installation
7229

7330
Install with yarn
7431

7532
```bash
76-
yarn add transition-hook
33+
yarn add qhlab-library-template
7734
```
7835

7936
Or install with npm
8037

8138
```bash
82-
npm install transition-hook --save
39+
npm install qhlab-library-template --save
8340
```
8441

8542
## Usage
8643

87-
### useTransition
88-
89-
This hook transforms a boolean state into transition stage('from' | 'enter' | 'leave'), and unmount the component after timeout.
90-
91-
```jsx
92-
const [onOff, setOnOff] = useState(true)
93-
const {stage, shouldMount} = useTransition(onOff, 300) // (state, timeout)
94-
95-
return <div>
96-
<button onClick={()=>setOnOff(!onOff)}>toggle</button>
97-
{shouldMount && (
98-
<p style={{
99-
transition: '.3s',
100-
opacity: stage === 'enter' ? 1 : 0
101-
}}>
102-
Hey guys, I'm fading
103-
</p>
104-
)}
105-
</div>
106-
```
107-
108-
### useSwitchTransition
109-
110-
This hook transforms when the state changes.
111-
112-
```jsx
113-
const [count, setCount] = useState(0)
114-
const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)
115-
116-
return <div>
117-
<button onClick={()=>setCount(count+1)}>add</button>
118-
{transition((state, stage)=>(
119-
<p style={{
120-
transition: '.3s',
121-
opacity: stage === 'enter' ? 1 : 0,
122-
transform: {
123-
from: 'translateX(-100%)',
124-
enter: 'translateX(0%)',
125-
leave: 'translateX(100%)',
126-
}[stage]
127-
}}>{state}</p>
128-
))}
129-
</div>
130-
```
131-
132-
### Transition
133-
134-
If you prefer FaCC pattern usage, there it is!
135-
136-
```jsx
137-
const [onOff, setOnOff] = useState(true)
138-
139-
return <div>
140-
<button onClick={()=>setOnOff(!onOff)}>toggle</button>
141-
<Transition state={onOff} timeout={300}>
142-
{(stage, shouldMount)=>shouldMount &&(
143-
<p style={{
144-
transition: '.3s',
145-
opacity: stage === 'enter' ? 1 : 0
146-
}}>
147-
Hey guys, I'm fading
148-
</p>
149-
)}
150-
</Transition>
151-
</div>
152-
```
153-
154-
### SwitchTransition
155-
156-
FaCC pattern version of useSwitchTransition
157-
158-
```jsx
159-
<SwitchTransition state={count} timeout={300} mode='default'>
160-
{(state, stage) => (
161-
<h1
162-
style={{
163-
transition: '.3s',
164-
opacity: stage === 'enter' ? 1 : 0,
165-
transform: {
166-
from: 'translateX(-100%) scale(1.2)',
167-
enter: 'translateX(0)',
168-
leave: 'translateX(100%) scale(0)'
169-
}[stage]
170-
}}>
171-
{state} {stage} hello
172-
</h1>
173-
)}
174-
</SwitchTransition>
175-
```
44+
> Write some thing nice.
17645
17746
## API Reference
17847

179-
### useTransition(state, timeout)
180-
181-
```js
182-
const {stage, shouldMount} = useTransition(onOff, 300)
183-
```
184-
185-
| Parameters | Type | Description |
186-
| :--------- | :-------- | :-------------------------------------------------------------------- |
187-
| `state` | `boolean` | **Required**. Your boolean state, which controls animation in and out |
188-
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
189-
190-
<br>
191-
192-
| Returns | Type | Description |
193-
| :------------ | :---------------------------------- | :-------------------------------------------------- |
194-
| `stage` | Stage: `from` \| `enter` \| `leave` | Use three different stage to perform your animation |
195-
| `shouldMount` | `boolean` | Whether the component should be mounted |
196-
197-
### useSwitchTransition(state, timeout, mode)
198-
199-
```js
200-
const transition = useSwitchTransition(onOff, 300, 'default')
201-
```
202-
203-
| Parameters | Type | Description |
204-
| :--------- | :-------------------------------- | :------------------------------------------------------------ |
205-
| `state` | `any` | **Required**. Your state, which triggers animation |
206-
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
207-
| `mode` | `default` \| `out-in` \| `in-out` | **Optional**. Default to `default` mode |
208-
209-
### Transition
210-
211-
```jsx
212-
<Transition state={onOff} timeout={300}>
213-
{(stage, shouldMount) => shouldMount && <div style={{...}}>hello</div>}
214-
</Transition>
215-
```
216-
217-
| Props | Type | Description |
218-
| :--------- | :------------------------------------------------------ | :-------------------------------------------------------------------- |
219-
| `state` | `boolean` | **Required**. Your boolean state, which controls animation in and out |
220-
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
221-
| `children` | `(stage: Stage, shouldMount: boolean)=>React.ReactNode` | **Required**. FaCC pattern. |
222-
223-
### SwitchTransition
224-
225-
```jsx
226-
<SwitchTransition state={count} timeout={300}>
227-
{(state, stage) => <div style={{...}}>{state} hello</div>}
228-
</SwitchTransition>
229-
```
230-
231-
| Props | Type | Description |
232-
| :--------- | :-------------------------------------------- | :-------------------------------------------------------------------- |
233-
| `state` | `any` | **Required**. Your boolean state, which controls animation in and out |
234-
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
235-
| `mode` | `default` \| `out-in` \| `in-out` | **Optional**. Default to `default` mode |
236-
| `children` | `(state: any, stage: Stage)=>React.ReactNode` | **Required**. FaCC pattern. |
48+
> Write some thing nice.
23749
23850
## License
23951

0 commit comments

Comments
 (0)