windows-98-ui
Version:
React component library inspired by and using the css from [98.css](https://github.com/jdan/98.css) library for vanilla html
89 lines (61 loc) • 2.74 kB
Markdown
# windows-98-ui
React component library inspired by and using the css from [98.css](https://github.com/jdan/98.css) library for vanilla html
## Overview
`windows-98-ui` is a React component library that brings the nostalgic look and feel of Windows 98 to your modern web applications. It leverages the [98.css](https://github.com/jdan/98.css) library to provide authentic styling.
## View Components
You can view the components using this storybook [link](https://bensimmers.github.io/windows-98-ui/)
## Installation
```bash
npm install windows-98-ui
```
## Usage
Wrap your components in `Win98Provider` to scope all 98.css styles. This prevents the Windows 98 styles from leaking into the rest of your app.
```jsx
import { Win98Provider, Button } from 'windows-98-ui';
function App() {
return (
<Win98Provider>
<Button label="OK" />
</Win98Provider>
);
}
```
`Win98Provider` renders a `<div class="win98">` container and injects the scoped styles into `<head>` when it mounts, removing them when it unmounts. You can place it at the top level of your app or around individual sections — only the content inside will be styled.
### Optional className
You can pass a `className` to the provider to style the container:
```jsx
<Win98Provider className="my-desktop">
<Button label="OK" />
</Win98Provider>
```
### Available components
| Component | Import |
|-----------|--------|
| `Button` | `import { Button } from 'windows-98-ui'` |
| `CheckBox` | `import { CheckBox } from 'windows-98-ui'` |
| `Dropdown` | `import { Dropdown } from 'windows-98-ui'` |
| `TextBox` | `import { TextBox } from 'windows-98-ui'` |
| `Slider` | `import { Slider } from 'windows-98-ui'` |
| `TitleBar` | `import { TitleBar } from 'windows-98-ui'` |
| `Window` | `import { Window } from 'windows-98-ui'` |
| `WindowBody` | `import { WindowBody } from 'windows-98-ui'` |
| `Desktop` | `import { Desktop } from 'windows-98-ui'` |
| `TreeView` | `import { TreeView } from 'windows-98-ui'` |
| `Progress` | `import { Progress } from 'windows-98-ui'` |
## Local Development
To set up the project locally, follow these steps:
```bash
git clone <repo>
cd windows-98-ui
npm install
npm start
```
## Chasnge Log
See the [CHANGELOG.md](CHANGELOG.md) file for details.
## Contributing
Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) to get started.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.