Get started

Installation

# with npm
npm install --save panache-react

# with yarn
yarn add panache-react

Create Panache components

The Panache component creator takes a Style Object or a function that returns a Style Object as argument. The creator can create any valid HTML element.

Below we'll initiate a div component and pass a Style Object to it.

import panache from 'panache-react'

const MyComponent = panache.div({
  color: '#fff',
  backgroundColor: 'gray',
  padding: '20px'
})

Use it like a regular React component.

<MyComponent>
  Hello, I'm a Panache component
</MyComponent>

This component will render the following styled output.

Dynamic style based on props

It's easy to adapt your components style based on props. To access props we pass a function to the component creator, the function will receive a props object where you can access any props you pass to the component.

const MyComponent = panache.div(props => ({
  color: '#fff',
  backgroundColor: props.isClicked ? 'red' : 'gray',
  padding: '20px'
}))

<MyComponent isClicked={isClicked} />

Nested elements and pseudo selectors

You can target nested elements, pseudo selectors and custom classes with a SASS-like syntax.

const MyComponent = panache.div({
  color: '#fff',
  backgroundColor: 'gray',
  div: {
    backgroundColor: 'red',
  },
  '&:hover': {
    backgroundColor: 'black',
  },
})