// TEST commit author
import GlitchClip from 'react-glitch-effect/core/Clip';
Name | Type | Default |
---|---|---|
disabled | boolean |
false |
duration | string |
3s |
iterationCount | string |
infinite |
onHover | boolean |
false |
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
const MyComponent = () => {
return (
<GlitchClip>
<h1>Glitch</h1>
</GlitchClip>
)
}
import React, {useState} from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
const MyComponent = () => {
const [isDisabled, setDisabled] = useState(false);
const handleToggleGlitch = () => {
setDisabled(!isDisabled);
};
return (
<div>
<button onClick={handleToggleGlitch}>TOGGLE EFFECT</button>
<GlitchClip disabled={isDisabled}>
<h1>Glitch</h1>
</GlitchClip>
</div>
)
};
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
const MyComponent = () => {
return (
<GlitchClip onHover={true}>
<h1>Glitch</h1>
</GlitchClip>
)
}
import GlitchClip from 'react-glitch-effect/core/Text';
Name | Type | Default |
---|---|---|
component | string |
span |
color1 | string |
rgba(77, 171, 245, .5) |
color2 | string |
rgba(245, 0, 87, .3) |
disabled | boolean |
false |
duration | string |
2s |
iterationCount | string |
infinite |
onHover | boolean |
false |
import React, {useState} from 'react';
import GlitchText from 'react-glitch-effect/core/Text';
const MyComponent = () => {
const [isDisabled, setDisabled] = useState(false);
const handleToggleGlitch = () => {
setDisabled(!isDisabled);
};
return (
<div>
<button onClick={handleToggleGlitch}>TOGGLE EFFECT</button>
<GlitchText component='h1' disabled={isDisabled}>
Glitch
</GlitchText>
</div>
)
};
Author: sakalx
Demo: https://sakalx.github.io/react-glitch-effect/
Source Code: https://github.com/sakalx/react-glitch-effect
#react #reactjs #javascript