diff --git a/README.md b/README.md index 4e10e99..64a3fab 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,16 @@ -# ink-divider - + +# ${\color{gray}\tiny──────}$ ink-divider ${\color{gray}\tiny──────}$ 👩🏼‍🎨 Divider component for [Ink](https://github.com/vadimdemedes/ink). -## Install +## 📥 Install ```bash npm i ink-divider ``` -## Usage +## 🚀 Usage + +Here is the basic usage: ```jsx import { render } from 'ink' @@ -19,10 +21,15 @@ render() // ─────────── Title ─────────── ``` +The `` component can also automatically adjust to the width of the container! +We advise you to view this example - [`examples/auto-grow.tsx`](https://raw.githubusercontent.com/JureSotosek/ink-divider/refs/heads/master/examples/auto-grow.tsx), more examples in the [`examples`](https://github.com/JureSotosek/ink-divider/tree/master/exampes) folder + -example +example + +--- -## Props +## ⚙️ Props ### title diff --git a/examples/advanced.tsx b/examples/advanced.tsx index 2b9c9d7..de55412 100644 --- a/examples/advanced.tsx +++ b/examples/advanced.tsx @@ -1,8 +1,17 @@ import { render } from 'ink' import Divider from '../src' +/** + * Component that renders a divider with custom settings. + * Demonstrates the usage of `title`, `dividerChar`, `dividerColor`, and `width` props. + */ const Advanced = () => ( - + ) render() diff --git a/examples/auto-grow.tsx b/examples/auto-grow.tsx new file mode 100644 index 0000000..882cbf1 --- /dev/null +++ b/examples/auto-grow.tsx @@ -0,0 +1,25 @@ +import { render, Box, Text } from 'ink' +import Divider from '../src' + +const lorem = ( + Lorem ipsum dolor sit amet consectetur adipisicing elit. +) + +/** + * Renders a Box with a divider and lorem ipsum text. + * Demonstrates Divider's ability to automatically adjust its width to the parent container. + */ +render( + + {lorem} + {/* Divider automatically stretches to fill the Box width */} + + {lorem} + +) diff --git a/examples/basic.tsx b/examples/basic.tsx index 48a7d8d..25c7376 100644 --- a/examples/basic.tsx +++ b/examples/basic.tsx @@ -1,6 +1,10 @@ import { render } from 'ink' import Divider from '../src' -const Basic = () => +/** + * Basic Divider component example. + * Demonstrates rendering a divider with a title and specified width. + */ +const Basic = () => // Divider with title and width render() diff --git a/media/example.png b/media/example.png index 0a7c17a..0a720fd 100644 Binary files a/media/example.png and b/media/example.png differ diff --git a/package.json b/package.json index 64118e2..96ae11c 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,11 @@ "preversion": "bun run test && bun run format && git add .", "build": "bun build ./src/index.tsx --minify --outdir ./dist --target node --external=yoga-wasm-web", "prepublishOnly": "bun run build", - "prepare": "husky" + "prepare": "husky", + "examples:basic": "bun ./examples/basic.tsx", + "examples:advanced": "bun ./examples/advanced.tsx", + "examples:auto-grow": "bun ./examples/auto-grow.tsx", + "examples": "bun run examples:basic && echo && bun run examples:advanced && echo && bun run examples:auto-grow" }, "dependencies": { "ink": "^5.1.0",