12 |
57 |
13 |
19 |
37 |
14 |
17 |
18 | Function useGlitch
-
20 |
- use
Glitch(userOptions?): GlitchHandle
21 | -
22 | 25 |32 |
Parameters
26 |-
27 |
-
28 |
29 |OptionaluserOptions: RecursivePartial<PowerGlitchOptions>31 |Options given to PowerGlitch
30 |
Returns GlitchHandle
A glitch handle with glitch controls, a function to update the options and
33 | 34 | -
28 |
58 |
59 |
--------------------------------------------------------------------------------
/docs/api-docs/index.html:
--------------------------------------------------------------------------------
1 | Generated using TypeDoc
12 |
105 |
13 | 
16 |
17 |
70 |
14 |
15 | react-powerglitch
React PowerGlitch
16 |
17 | This React library is a wrapper around PowerGlitch. PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.
18 |-
19 |
- Original project repository and documentation 20 |
- Code coverage report for react-powerglitch 21 |
- API reference for react-powerglitch 22 |
Getting started
24 | Install 25 | → Glitch 26 | → Customize 27 | → Controls 28 | / TypeScript 29 |
30 | 31 |Install
-
32 |
Install
33 |react-powerglitchusing a package manager
35 |npm i --save react-powerglitch
# or
yarn add react-powerglitch 34 |
36 | Import the
37 |useGlitchhook fromreact-powerglitchanytime you want to use it.
39 |import { useGlitch } from 'react-powerglitch' 38 |
40 |
Glitch
In order to glitch something, call useGlitch() and store its result in a variable.
function App() {
const glitch = useGlitch();
return (
<h1>react-powerglitch <span ref={glitch.ref}>🌎</span></h1>
);
}
43 | One limitation, when having the createContainers option set to true (which is the default), to not place the glitched element as the direct child of a component or a conditional rendering block. E.g. this will not work:
<>
{/* Will not work */}
{condition &&
<span ref={glitch.ref}>🌎</span>
}
</>
46 | Instead, wrap the glitched element with a container:
48 |<>
{/* Will work */}
{condition &&
<div>
<span ref={glitch.ref}>🌎</span>
</div>
}
</>
49 | Customize
You can pass options to customize the glitch effect to useGlitch:
function App() {
const glitch = useGlitch({ glitchTimeSpan: false });
return (
<h1>react-powerglitch <span ref={glitch.ref}>🌎</span></h1>
);
}
52 | The options props accept any value defined in the original PowerGlitch library.
Take a look at the playground to visually find out the best glitch options for your element.
55 |Glitch controls
The useGlitch hook returns an object containing:
-
57 |
ref: A function ref which you should use on the element you want to glitch, as shown in previous sections.
58 | startGlitch: Glitch control functions to start the glitch animation.
59 | stopGlitch: Glitch control functions to stop the glitch animation.
60 | setOptions: A function to change the glitch options. This will update the glitched element with the new options.
61 |
Here is an example:
63 |function App() {
const glitch = useGlitch({ glitchTimeSpan: false });
return (
<>
<div>
<h1 ref={glitch.ref}>react-powerglitch 🌎</h1>
</div>
<button onClick={glitch.startGlitch}>
Start
</button>
<button onClick={glitch.stopGlitch}>
Stop
</button>
</>
);
}
64 | TypeScript
The type GlitchHandle represents the return type of the useGlitch hook.
Your IDE should automatically identify the return type of useGlitch to be GlitchHandle and assign it to any variable you assign useGlitch() to. In case you want to statically use it, import GlitchHandle from react-powerglitch.
import { useGlitch, GlitchHandle } from 'react-powerglitch';
function App() {
const glitch: GlitchHandle = useGlitch({ glitchTimeSpan: false });
return (
<>
<div>
<h1 ref={glitch.ref}>react-powerglitch 🌎</h1>
</div>
<button onClick={glitch.startGlitch}>
Start
</button>
<button onClick={glitch.stopGlitch}>
Stop
</button>
</>
);
}
68 |
106 |
107 |
--------------------------------------------------------------------------------
/docs/api-docs/modules.html:
--------------------------------------------------------------------------------
1 | Generated using TypeDoc
12 |
46 |
13 |
16 |
17 |
19 |
22 |
23 |
26 |
14 |
15 | react-powerglitch
Index
18 |Type Aliases
20 |Glitch
Functions
24 |use
47 |
48 |
--------------------------------------------------------------------------------
/docs/api-docs/types/GlitchHandle.html:
--------------------------------------------------------------------------------
1 | Generated using TypeDoc
12 |
101 |
13 |
21 |
81 |
14 |
17 |
18 | Type alias GlitchHandle
Glitch
ref: ((node) => void);
startGlitch: (() => void);
stopGlitch: (() => void);
setOptions: ((options) => void);
}
19 | ref: ((node) => void);
startGlitch: (() => void);
stopGlitch: (() => void);
setOptions: ((options) => void);
}
Handle to control the glitch once useGlitch is called.
20 |
22 |
78 | Type declaration
23 |-
24 |
-
25 |
ref: ((node) => void)
26 |-
27 |
-
28 |
-
29 |
- (node): void 30 |
-
31 | 33 |
Function to use as ref for the element to glitch.
32 |34 |38 |Parameters
35 |-
36 |
-
37 |
node: HTMLElement | null
Returns void
39 | -
37 |
40 | -
28 |
-
41 |
start
42 |Glitch: (() => void) -
43 |
-
44 |
-
45 |
- (): void 46 |
-
47 | 49 |
Glitch control to start the glitch animation.
48 |Returns void
50 |
51 | -
44 |
-
52 |
stop
53 |Glitch: (() => void) -
54 |
-
55 |
-
56 |
- (): void 57 |
-
58 | 60 |
Glitch control to stop the glitch animation.
59 |Returns void
61 |
62 | -
55 |
-
63 |
set
64 |Options: ((options) => void) -
65 |
-
66 |
-
67 |
- (options): void 68 |
-
69 | 71 |
Change the glitch options.
70 |72 |76 |Parameters
73 |-
74 |
-
75 |
options: RecursivePartial<PowerGlitchOptions>
Returns void
77 | -
75 |
-
66 |
102 |
103 |
--------------------------------------------------------------------------------
/docs/assets/index-1e438818.css:
--------------------------------------------------------------------------------
1 | :root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;margin-left:.2em;margin-right:.2em}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
2 |
--------------------------------------------------------------------------------
/docs/coverage/clover.xml:
--------------------------------------------------------------------------------
1 |
2 | Generated using TypeDoc
21 |
101 |
106 |
107 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/docs/coverage/lcov-report/index.ts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
64 |
65 | All files
23 |
24 |
25 |
54 |
26 | 100%
27 | Statements
28 | 19/19
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 1/1
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 8/8
43 |
44 |
45 |
46 |
47 | 100%
48 | Lines
49 | 13/13
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 |
66 |
67 |
68 |
98 |
99 |
100 | | File | 70 |71 | | Statements | 72 |73 | | Branches | 74 |75 | | Functions | 76 |77 | | Lines | 78 |79 | |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | 83 |
84 |
85 | |
86 | 100% | 87 |19/19 | 88 |100% | 89 |1/1 | 90 |100% | 91 |8/8 | 92 |100% | 93 |13/13 | 94 |
21 |
66 |
280 |
281 |
282 |
283 |
288 |
289 |
294 |
295 |
296 |
297 |
298 |
--------------------------------------------------------------------------------
/docs/coverage/lcov-report/prettify.css:
--------------------------------------------------------------------------------
1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
2 |
--------------------------------------------------------------------------------
/docs/coverage/lcov-report/prettify.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V
22 |
64 |
65 | All files index.ts
23 |
24 |
25 |
54 |
26 | 100%
27 | Statements
28 | 19/19
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 1/1
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 8/8
43 |
44 |
45 |
46 |
47 | 100%
48 | Lines
49 | 13/13
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 | | 1 67 | 2 68 | 3 69 | 4 70 | 5 71 | 6 72 | 7 73 | 8 74 | 9 75 | 10 76 | 11 77 | 12 78 | 13 79 | 14 80 | 15 81 | 16 82 | 17 83 | 18 84 | 19 85 | 20 86 | 21 87 | 22 88 | 23 89 | 24 90 | 25 91 | 26 92 | 27 93 | 28 94 | 29 95 | 30 96 | 31 97 | 32 98 | 33 99 | 34 100 | 35 101 | 36 102 | 37 103 | 38 104 | 39 105 | 40 106 | 41 107 | 42 108 | 43 109 | 44 110 | 45 111 | 46 112 | 47 113 | 48 114 | 49 115 | 50 116 | 51 117 | 52 118 | 53 119 | 54 120 | 55 121 | 56 122 | 57 123 | 58 124 | 59 125 | 60 126 | 61 127 | 62 128 | 63 129 | 64 130 | 65 131 | 66 132 | 67 133 | 68 134 | 69 135 | 70 136 | 71 137 | 72 | 1x 138 | 1x 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 1x 172 | 173 | 174 | 175 | 5x 176 | 177 | 178 | 179 | 180 | 5x 181 | 5x 182 | 183 | 184 | 185 | 186 | 187 | 5x 188 | 189 | 190 | 4x 191 | 2x 192 | 193 | 194 | 195 | 196 | 2x 197 | 2x 198 | 2x 199 | 200 | 201 | 5x 202 | 203 | 204 | 205 | 206 | 207 | 208 | | import { useCallback, useState } from 'react';
209 | import { PowerGlitch, PowerGlitchOptions, RecursivePartial } from 'powerglitch';
210 |
211 |
212 | /**
213 | * Handle to control the glitch once useGlitch is called.
214 | */
215 | export type GlitchHandle = {
216 | /**
217 | * Function to use as ref for the element to glitch.
218 | */
219 | ref: (node: HTMLElement | null) => void,
220 |
221 | /**
222 | * Glitch control to start the glitch animation.
223 | */
224 | startGlitch: () => void,
225 |
226 | /**
227 | * Glitch control to stop the glitch animation.
228 | */
229 | stopGlitch: () => void,
230 |
231 | /**
232 | * Change the glitch options.
233 | */
234 | setOptions: (options: RecursivePartial<PowerGlitchOptions>) => void,
235 | };
236 |
237 | /**
238 | * Hook to glitch one element.
239 | * @param userOptions Options given to PowerGlitch
240 | * @returns A glitch handle with glitch controls, a function to update the options and
241 | */
242 | export function useGlitch(userOptions?: RecursivePartial<PowerGlitchOptions>): GlitchHandle {
243 | /**
244 | * Copy the options into a state object to avoid unecessary re-renders if the client is re-creating an options object in the main block.
245 | */
246 | const [options, setOptions] = useState(userOptions);
247 |
248 | /**
249 | * Placeholder functions to start/stop the glitch, set after actually glitching the element.
250 | */
251 | const [startGlitch, setStartGlitch] = useState<(() => void)>(() => () => void 0);
252 | const [stopGlitch, setStopGlitch] = useState<(() => void)>(() => () => void 0);
253 |
254 | /**
255 | * Will run each time the ref to the node to glitch changes.
256 | * E.g. after mount or when added/removed due to conditional rendering.
257 | */
258 | const ref = useCallback((node: HTMLElement | null) => {
259 | // If glitching an element inside a conditional render,
260 | // `node` might not exist at some point, in which case we have nothing to glitch.
261 | if (! node) {
262 | return;
263 | }
264 |
265 | // When/if node is visible, glitch it
266 | // Because of useCallback, we should not glitch an already glitched element, even though the underlying library supports it.
267 | const result = PowerGlitch.glitch(node, options);
268 | setStartGlitch(() => result.startGlitch);
269 | setStopGlitch(() => result.stopGlitch);
270 | }, [options]);
271 |
272 | return {
273 | ref,
274 | startGlitch,
275 | stopGlitch,
276 | setOptions,
277 | };
278 | }
279 | |
13 |
15 | }
16 |
19 |
22 |
25 |
26 | );
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/src/docs/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | color-scheme: light dark;
8 | color: rgba(255, 255, 255, 0.87);
9 | background-color: #242424;
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
18 | #root {
19 | max-width: 1280px;
20 | margin: 0 auto;
21 | padding: 2rem;
22 | text-align: center;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | margin-left: 0.2em;
49 | margin-right: 0.2em;
50 | }
51 | button:hover {
52 | border-color: #646cff;
53 | }
54 | button:focus,
55 | button:focus-visible {
56 | outline: 4px auto -webkit-focus-ring-color;
57 | }
58 |
59 | @media (prefers-color-scheme: light) {
60 | :root {
61 | color: #213547;
62 | background-color: #ffffff;
63 | }
64 | a:hover {
65 | color: #747bff;
66 | }
67 | button {
68 | background-color: #f9f9f9;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react';
2 | import { PowerGlitch, PowerGlitchOptions, RecursivePartial } from 'powerglitch';
3 |
4 |
5 | /**
6 | * Handle to control the glitch once useGlitch is called.
7 | */
8 | export type GlitchHandle = {
9 | /**
10 | * Function to use as ref for the element to glitch.
11 | */
12 | ref: (node: HTMLElement | null) => void,
13 |
14 | /**
15 | * Glitch control to start the glitch animation.
16 | */
17 | startGlitch: () => void,
18 |
19 | /**
20 | * Glitch control to stop the glitch animation.
21 | */
22 | stopGlitch: () => void,
23 |
24 | /**
25 | * Change the glitch options.
26 | */
27 | setOptions: (options: RecursivePartialreact-powerglitch 🌎
14 |Hello World
);
29 | }
30 | const wrapper = render(Hello World
);
46 | }
47 | render(No glitch.
);
56 | }
57 | render(
Hook to glitch one element.
23 |