rn-glitch-effect
Version:
A react-native library that glitches some text
153 lines (129 loc) • 5.89 kB
Markdown
# rn-glitch-effect
# Welcome to Glitch Effect :wave:
 
## What is React native Glitch Effect?
- Is a simple way to glitch your text and images.
## Instalation
```javascript
npm i rn-glitch-effect
```
# Properties - Glitch
| props | description | default value | |
| ------------------- | ------------------- | ------------------- | ------------------- |
| text | Your text label that's going to be displayed. | empty | <b>String</b>|
| glitchHeight | The height that you want your glitch effect will have. | 80 | <b>Integer</b>|
| glitchAmplitude | The amplitude of your glitch. In other words, how far your effect will be from the main text. | 5 | <b>Integer</b>|
| glitchDuration | The duration of your glitch effect. | 1500 | <b>Milisseconds</b>|
| repeatDelay | How long time your effect will wait, to start another turn of effect. | 2000 | <b>Milisseconds</b>|
| shadowColor | The shadow color of your effect. | #add8e6 | <b>rgb</b>|
| textStyle | The style that you want to give to your text. | {color: '#000000',fontWeight: 'bold',letterSpacing: 3,} | <b>Object</b>|
| heightInputRange | The input range to the interpolation of main animation. With this you can control each part of your effect height. | [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] | <b>array</b>|
| positionYInputRange | The input range to the interpolation of main animation. With this you can control each part of your effect position. | [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] | <b>array</b>|
| outOfTextRange | Will make your effect get out of the range from your text | false | <b>Boolean</b>|
| disableAutoAnimation | enable or disabled your animation | false | <b>Boolean</b>|
# Properties - GlitchImage
| props | description | default value | |
| ------------------- | ------------------- | ------------------- | ------------------- |
| glitchHeight | The height that you want your glitch effect will have. | 200 | <b>Integer</b>|
| glitchAmplitude | The amplitude of your glitch. In other words, how far your effect will be from the main text. | 5 | <b>Integer</b>|
| glitchDuration | The duration of your glitch effect. | 1500 | <b>Milisseconds</b>|
| repeatDelay | How long time your effect will wait, to start another turn of effect. | 2000 | <b>Milisseconds</b>|
| shadowColor | The shadow color of your effect. | #add8e6 | <b>rgb</b>|
| imageStyle | The style that you want to give to your text. | {width: 400,height: 200} | <b>Object</b>|
| heightInputRange | The input range to the interpolation of main animation. With this you can control each part of your effect height. | [0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110] | <b>array</b>|
| positionYInputRange | The input range to the interpolation of main animation. With this you can control each part of your effect position. | [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] | <b>array</b>|
| disableAutoAnimation | enable or disabled your animation | false | <b>Boolean</b>|
| source | Your image path. | false | <b>String</b>|
# Usage
Basic Glitch
- You can use this with or without the View container
```javascript
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {
return (
<View style={styles.containerWithBg}>
<Glitch
text={'GLITCH'}
mainColor={'black'}
shadowColor={'green'}
/>
</View>
);
};
const styles = StyleSheet.create({
containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;
```
Glitch with Button
- You can use this with a button wrapping your text and define if it will activate the glitch when clicked
```javascript
import React, {useRef} from 'react';
import {TouchableHighlight, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {
const ref = useRef();
return (
<View style={[styles.container]}>
<TouchableHighlight
onPress={() => {
ref.current.animate();
}}
style={[styles.containerWithBg]}>
<Glitch
text={'RESPONSIVE'}
ref={ref}
mainColor={'black'}
shadowColor={'pink'}
disableAutoAnimation={true}
/>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;
```
```javascript
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Glitch, GlitchImage} from 'rn-glitch-effect';
import Gator from './assets/images/gator.jpeg';
const App = () => {
return (
<View style={[styles.container]}>
<View style={styles.containerWithBg}>
<Glitch
text={'GLITCH'}
mainColor={'black'}
shadowColor={'green'}
outOfTextRange={false}
/>
<GlitchImage shadowColor={'red'} mainColor={'black'} source={Gator} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
image: {
width: 400,
height: 200,
},
});
export default App;
```
# End of the line :)
If you have any ideia to contribute with this project, please make your self home.