@thematic/react
This is the React package for thematic. It makes things easier to use with React!
Last updated a month ago by natoverse .
MIT · Original npm · Tarball · package.json
$ cnpm install @thematic/react 
SYNC missed versions from official npm registry.

This is the React package for thematic. It makes things easier to use with React!

Getting started

There is a context provider and hook for retrieving a theme instance in your components.

It looks something like this:

	// in your App.tsx or other 'root'
	import React from 'react'
	import { load } from '@thematic/core'
	import { ThematicProvider } from '@thematic/react'

	const theme = load()

	const App = () => {
		return (
			<ThematicProvider theme={theme}>
				<div>Hello World</div>
			</ThematicProvider>
		)
	}

Later, in some other component:

	import React from 'react'
	import { useThematic } from '@thematic/react'

	const Child = () => {
		const theme = useThematic()

		return (
			<div
				style={{
					backgroundColor: theme.application().background().hex()
					color: theme.application().foreground().hex()
				}}
			>
				Hello again!
			</div>
		)
	}

We also have a handle of styling functions and a root ApplicationStyles component to ease applying basic theme colors to your application defaults.

For example:

	// in your App.tsx or other 'root'
	import React from 'react'
	import { load } from '@thematic/core'
	import { ThematicProvider, ApplicationStyles } from '@thematic/react'

	const theme = load()

	const App = () => {
		return (
			<ThematicProvider theme={theme}>
				<ApplicationStyles />
				<div>Hello World</div>
			</ThematicProvider>
		)
	}

Weaving the ApplicationStyles component in here ensures that your default background, body text, and hyperlink colors match the theme.

Current Tags

  • 0.9.0                                ...           latest (a month ago)

2 Versions

  • 0.9.0                                ...           a month ago
  • 0.8.0                                ...           3 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 9
Dependencies (3)
Dev Dependencies (1)

Copyright 2014 - 2016 © taobao.org |