@npm.tangocode/tc_ui_components/src/documentation/AnimatedLabel.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## AnimatedLabel ##

### Description ###

An input with a floting label animation that describes the expected value of the input.

### Props ###

1. __placeholder__ (string):  The placeholder is a string that will be used as a  short hint that describes the expected value of the input field.

2. __autosize ?__ (boolean): 

    * True : You will get an input element
    * Fale : You will get a textarea element

3. __value__ (string):  The value to be shown in the input or textarea.

4. __onValueChange__ (function): ((value: string) => void) :  Function to be called when the input changes. It passes the new value.

5. __styles ?__ (AnimatedLabel.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    * FloatingLabel : Is the label component  for the input/textarea
        - height, font-size, color and top can not be customized becouse it depends on the float prop.

    * FloatingInput: Is the input component 

    * TextArea: Is the Text area component

    ```ts
        styles={{
            FloatingLabel?: <styled component>;
            FloatingInput?: <styled component>;
            TextArea?: <styled component>;          
            LabelContainer?: <styled component>;
        }};
    ```
6. __floatingLabelAnimation ?__ (Json): A json with the values for the animation.

    * minSize
    * maxSize
    * color
    * floatingColor
    * transition
    * top
    * floatingTop

7. __id ?__ (string): A prefix identifier for all the html elements of the component.

8. __name ?__ (string): A prefix name for all the html elements of the component


### Usage ###

```jsx
<AnimatedLabel 
    placeholder={'TESTING'}
    autosize={false}
    value={this.state.value}
    onValueChange={(e: any) => this.setState({ value: e.target.value })}
    id={'animatedId'} 
    name={'animatedNamed'}
/>
```

### Styling ###
```jsx
render() {
        const theme = {
            minSize: "5px",
            maxSize: "28px",
            color: "#F36822",
            floatingColor: "#3C2D26",
            transition: "0.90s all",
            top: "20px",
            floatingTop: "3px"
        }

        const style = {
            FloatingInput: styles.animatedLabel.FloatingInput.extend`
            padding-left: 30px;    
            border-bottom: 5x solid; 
                `

        };
        return (
            <div style={{ width: 200 }}>

                <AnimatedLabel
                    placeholder={'TESTING'}
                    autosize={false}
                    value={this.state.value}
                    onValueChange={(e: any) => this.setState({ value: e.target.value })}
                    styles={style}
                    floatingLabelAnimation={theme}
                    id={'animatedId'} 
                    name={'animatedNamed'}
                >
                </AnimatedLabel>
            </div>
        );
    }
```