preact-solids
CSS-only Material Design primitives for Preact
.
Install
npm install --save solids preact-solids
Use
Inside your Preact components, import the preact-solids component you want to use and use it in the JSX. Assuming you are not using CSS Modules, you also import the styles from solids that correspond with the components you are using. Don’t forget to import solids/solids and render the solids context element:
import { h } from 'preact'
import AppBar from 'preact-solids/appbar'
import 'solids/solids'
import 'solids/appbar'
export const MyComponent = (props) => (
<div class="solids">
<AppBar prominent fixed shrink>
<p>AppBar</p>
</AppBar>
</div>
)
If you are using CSS Modules, you should make sure that you import all your solids components in one place and use that import as a theme provider:
routes/home/index.js
import { h } from 'preact';
import { Provider } from 'preact-solids/theme';
import AppBar from 'preact-solids/appbar';
import classes from './style';
export const Home = () => (
<Provider value={{ classes }}>
<AppBar>
<p>Solids</p>
</AppBar>
</Provider>
);
export default Home;
routes/home/styles.scss
@import "solids/solids";
@import 'solids/appbar';
/* other styles */
Preact solids components load the default class names from solids, but listen for alternatives using a Theme consumer. If such alternatives are supplied to the components using a Theme provider like in the example above, it will use those class names instead of the defaults.
solids-www
For now, have a look at the solids-www project for some examples on how to use solids and preact-solids components in an app generated with Preact CLI.
Issues
Add an issue in the issue tracker
to let me know of any problems you find, or questions you may have.
Credits
Credits go to:
- The Material Design and MDC teams at Google
- Ben Mildren for inspiring the world with Surface.
- Jason Miller for building Preact
- Prateek Bhatnagar for building preact-material-components
Copyright
© 2019 by Stijn de Witt. Some rights reserved.