"Batteries included" WebComponents library
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
__tests__
docs
rollup
src
.babelrc
.editorconfig
.flowconfig
.gitignore
.npmignore
.npmrc
.prettierrc
.travis.yml
README.md
book.json
index.js.flow
package.json
rollup.config.js
router.d.ts
sandstone.d.ts
yarn.lock

README.md

Sandstone

"Batteries-included" library for Web Components inspired by React.

Build Status npm Vave Code Style

Getting started

Getting started with Sandstone is extremely easy.

  1. Install Babel preset:

    npm install --save-dev babel-preset-sandstone
    

    and add it to your .babelrc:

    {
        "presets": ["sandstone"]
    }
  2. Create a component:

    import Sandstone from 'sandstone';
    
    class SuperHeader extends Sandstone {
        render(props) {
            return (
                <div>
                    <h1>{props.mainContent}</h1>
                    <h1>It's Superpowered!</h1>
                </div>
            );
        }
    }
    
    Sandstone.register(SuperHeader, 'super-header');
  3. Use it in your HTML:

    <main>
        ...
        <super-header main-content="It's not a simple    header."></super-header>
        ...
    </main>

The resulting HTML will be:

<div>
    <h1>It's not a simple header.</h1>
    <h1>It's Superpowered!</h1>
</div>

Documentation

Check out the docs to learn about rendering from strings and template tags, alternative build configurations and everything else.