unstyled
React components with minimal styling, easily to extend. Based on styled-components. Inspired by React Native components and SemanticUI. Will cover all common used html tags and adding convenient components for widely used UI elements.
WIP: This package is in an early alpha stage. Breaking changes can occur without notification. Already used in production (caution!). Feedback and contributions are welcome.
Versioning (prior to 1.0.0)
0.Y.Z
:
- Y => Breaking changes and Features
- Z => Patches
Installation
$ yarn add unstyled
or (if you prefer)
$ npm i --save unstyled
Usage with GatsbyJS
As this lib is mainly used with GatsbyJS for fast prototyping of new websites I'll cover that first.
yarn add unstyled styled-components gatsby-plugin-styled-components
Make sure to install "gatsby-plugin-styled-components" and configure it in `gatsby-config':
plugins: ["gatsby-plugin-styled-components", ...]
Example
import React from "react";import Container Button from "unstyled"; const App = <Container> <h1>Elements</h1> <Button>Basic Button</Button> </Container>; ;
Extend Elements
It's easy to extend elements and apply your own styles.
Just use styled-components
extend
feature.
import Button from 'unstyled' const CustomButton = Buttonextend` color: tomato;`
Theming
Wrap your own theme via styled-components ThemeProvider
.
import styled ThemeProvider from "styled-components"import StyledComponentsTheme Button from "unstyled" const Element = <ThemeProvider => <div> <h2>Button with custom theme:</h2> <Button> Styled Button </Button> </div> </ThemeProvider>
License
Licensed under the MIT License, Copyright © 2017 superlumen.
See LICENSE for more information.