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.

License

MIT