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

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

## Underline Animation ##

Customizable underline animation

### Props ###

1. __children__ (JSX.Element) : An input JSX element has to be passed in order for the focus animation to work. 

2. __styles ?__ (UnderlineAnimation.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.

```ts
    styles= {{
        UnderlineWrapper?: <styled component>;
        Underline?: <styled component>;    
    }}
```

### Usage ###

```jsx
     <div  style={{width: "200px", height: "40px"}}>
        <UnderlineAnimation>
            <input placeholder={"some input"}/>
        </UnderlineAnimation>
    </div>
    />
```

### Styling ###

```jsx
const newStyles= {{
    Underline: UnderlineAnimationStyles.Underline.extend`
        &: before {
            height: 5px; 
            background: red; 

        }
        &: after {
            height: 5px; 
            background: red; 

        };
    `;
}}

render() {
        return (
            <div  style={{width: "500px", height: "80px"}}>
                <UnderlineAnimation
                    styles={newStyles}
                >
                    <input placeholder={"some input"}/>
                </UnderlineAnimation>
            </div>
        )
}
```