A small collection of react components with styles.
npm install --save turtle-ui
import {Button} from 'turtle-ui'
class Example extends Component {
render () {
return (
<div>
<Button>Neutral</Button>
<Button classes="brand">Brand</Button>
<Button classes="accent">Accent</Button>
<Button classes="plain">Neutral</Button>
<Button classes="brand plain">Brand</Button>
<Button classes="accent plain">Accent</Button>
<Button classes="text plain">Neutral</Button>
<Button classes="brand text plain">Brand</Button>
<Button classes="accent text plain">Accent</Button>
</div>
)
}
}
See ./example/app/ for more usage samples.
This project was bootstrapped with create-react-library so…
Local development is broken into two parts.
First, you’ll run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.
npm start # runs rollup with watch flag
The second part will be running the example/ create-react-app that’s linked to the local version of your module.
# (in another tab)
cd example
npm link <your-module-name> # optional if using yarn
npm start # runs create-react-app dev server
Now, anytime you make a change to your component in src/ or to the example app’s example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.
base.css
file
fixed
, be sure to set --root-overflow: hidden
when showing (so the background content does not scroll)Switch
(checkbox)condensed
class as well as a footer
prop optiontitle
prop option to show above table headersTable
component, but it is fairly simple to implement, as the example showssmall
class to the Input
componentAuthor: anothrNick
Live Demo: https://anothrnick.github.io/turtle-ui/
Official Website: https://github.com/anothrNick/turtle-ui
☞ Getting Closure on React Hooks
☞ React + TypeScript : Why and How
☞ Learn about React Hooks and Styled Components in this full tutorial.
☞ Learn React - Full Course for Beginners - React Tutorial 2019