https://github.com/andrewsuzuki/otep
User interface library for React
https://github.com/andrewsuzuki/otep
components css-in-js framework glamor grid react ui
Last synced: 11 months ago
JSON representation
User interface library for React
- Host: GitHub
- URL: https://github.com/andrewsuzuki/otep
- Owner: andrewsuzuki
- Created: 2017-05-08T17:24:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-29T17:02:06.000Z (over 8 years ago)
- Last Synced: 2025-04-19T08:13:38.873Z (12 months ago)
- Topics: components, css-in-js, framework, glamor, grid, react, ui
- Language: JavaScript
- Homepage: andrewsuzuki.com/otep
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
User interface library for React.
##### Notice
This is currently alpha software, prone to breaking changes. Use at your own risk!
## Examples
### Hero
```jsx
import { Hero, HeroTitle, HeroSubtitle } from 'otep'
const Example = () =>
Welcome
This is a welcome page.
```
### Grid, Forms, and Tiles
```jsx
import {
Section,
Container,
Row,
Column,
H2,
Field,
Label,
Control,
RadioSet,
Tile,
} from 'otep'
const Example = () =>
Contact
Choose one
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
## Installation
```
# Yarn
yarn add otep
# NPM
npm install --save otep
```
## Usage
### Step one
Set up the `OtepProvider` container component near the top of your element tree, and provide it with a theme.
`OtepProvider` provides the supplied theme to its descendants via context, and also injects
global styles (both reset styles and theme-based plain-element styles).
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { OtepProvider, themes } from 'otep'
import App from './App'
const myTheme = {
...themes.standard,
// extend the standard theme at will!
}
// example
const Root = () =>
// example
ReactDOM.render(
,
document.getElementById('root'),
)
```
### Step Two
Import components and use them!
Individual component documentation coming soon.
```jsx
import React from 'react'
import {
Section,
Container,
Row,
Column,
Button,
} from 'otep'
export default App = () =>
Click me
Click me too
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request
## Credits
* Andrew Suzuki - @andrewsuzuki - [andrewsuzuki.com](http://andrewsuzuki.com)
## License
MIT