User interface library for React.
Notice
This is currently alpha software, prone to breaking changes. Use at your own risk!
Examples
Hero
import Hero HeroTitle HeroSubtitle from 'otep' const Example = <Hero> <HeroTitle>Welcome</HeroTitle> <HeroSubtitle>This is a welcome page</HeroSubtitle> </Hero>
Grid, Forms, and Tiles
import Section Container Row Column H2 Field Label Control RadioSet Tile from 'otep' const Example = <Section> <Container> <Row> <Column ="two-thirds"> <H2>Contact</H2> <Field > <Label>Choose one</Label> <Control> <RadioSet = /> </Control> </Field> </Column> <Column ="one-third"> <Tile ="primary"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua </Tile> </Column> </Row> </Container> </Section>
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).
import React from 'react'import ReactDOM from 'react-dom' import OtepProvider themes from 'otep' import App from './App' const myTheme = ...themesstandard // extend the standard theme at will! // exampleconst Root = <OtepProvider => <App /> </OtepProvider> // exampleReactDOM
Step Two
Import components and use them!
Individual component documentation coming soon.
import React from 'react' import Section Container Row Column Button from 'otep' = <Section> <Container> <Row> <Column ="one-half"> <Button>Click me</Button> </Column> <Column ="one-half"> <Button>Click me too</Button> </Column> </Row> </Container> </Section>
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
Credits
- Andrew Suzuki - @andrewsuzuki - andrewsuzuki.com
License
MIT