search

vadimdemedes / ink

🌈 React for interactive command-line apps
https://term.ink
MIT License
27.13k stars 608 forks source link

Customize border style #570

Closed vadimdemedes closed 1 year ago

vadimdemedes commented 1 year ago

This PR updates borderStyle prop in Box to accept an object with this shape:

type BoxStyle = {
  topLeft: string;
  top: string;
  topRight: string;
  left: string;
  bottomLeft: string;
  bottom: string;
  bottomRight: string;
  right: string
}

For example:

<Box
    borderStyle={{
        topLeft: '↘',
        top: '↓',
        topRight: '↙',
        left: '→',
        bottomLeft: '↗',
        bottom: '↑',
        bottomRight: '↖',
        right: '←'
    }}
>
    <Text>Content</Text>
</Box>

This allows developers to customize how Ink renders borders around a Box, in case none of the built-in styles provided by cli-boxes don't fit.