Preact-solids NPM

preact-solids

CSS-only Material Design primitives for Preact

installs

logo

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.