kindyle v1.0.2

kindyle

🍊Features

• 9 interactive Kindle components
• Light / Dark theme switch
• Native kindle OS font (Optional)
• Browser
• Still developing...

npm i kindyle

App

An app is a highly-integrated app in kindle, in most case you cannot edit it. If you use them in your project, you may need to also add a router yourself.

Browser

Reader

Componenets

Navbar

Navbar is an integrated kindle native component. All icons are un-editable, but you can still change some status and callback functions such as battery, device name and so on.

Container

If you want to use AmazonEmber font(around 106kb) and dark mode to get a more kindle-ish ui, you can wrap your app with Container componenet, which adds a global font-family.

import { Container } from "kindyle";

function App() {
	return (
		<Container>
            {/* ... */}
		</Container>
	);
}

export default App;

Typography

Use Typography to present an article or other rich-text content.

Button

Contribution

git clone https://github.com/rivertwilight/kindyle.git
npm run i-all
npm run dev

if it throws an error like Can't resolve 'kindle'..., Try three solustions:

1. Check whether the dist folder is empty, if so, run npm run build to build a production bundle then run npm run dev.

2. Check whether the playground/node_modules/kindyle exsit and linked to root directory. if not, you may need to run npm i ../ -savemannually in playgrpund folder.

3. If both 1 and 2 doesn't work, open two terminals, run npm run build-watchin first erminal and run npm run start-playground in another one.

License

MIT

inspired by this blog