import { useState } from 'react'
import Br from '../Br'
import Content from '../Content'
import Div from '../Div'
import Span from '../typography/Span'
import { u } from '../../config/helpers'
import TextInput from '../forms/TextInput'
import { Sandbox } from '@startupjs/docs'

# Br

`Br` is used to insert a line break. It also lets the developer customize the number of line breaks needed.

```jsx
import { Br } from 'startupjs/ui'
```

## Example

Number of line breaks can be changed by passing a number to `lines` prop. The default value of `lines` is `1` and the width of a one line is `16px`.

```jsx example
const itemStyle = {
  height: u(5),
  justifyContent: 'center',
  alignItems: 'center'
}
const [value, setValue] = useState('1')
return (
  <Content>
    <TextInput
      label='Enter number of lines of space'
      value={value}
      onChangeText={(text) => setValue(text)}
    />
    <Br />
    <Div style={itemStyle} level={1}>
      <Span size='xl'>Item 1</Span>
    </Div>
    <Br lines={Number(value)} />
    <Div style={itemStyle} level={1}>
      <Span size='xl'>Item 2</Span>
    </Div>
  </Content>
)
```

## Half of line break

Setting the `half` prop to `true` creates a line break equivalent to a `lines` value of `0.5`.

```jsx example
const itemStyle = {
  height: u(5),
  justifyContent: 'center',
  alignItems: 'center'
}
return (
  <Content>
    <Div style={itemStyle} level={1}>
      <Span size='xl'>Item 1</Span>
    </Div>
    <Br half />
    <Div style={itemStyle} level={1}>
      <Span size='xl'>Item 2</Span>
    </Div>
  </Content>
)
```

## Sandbox

<Sandbox Component={Br} />