# ss-to-react

> Convert SS templates to react components

Latest version **0.0.1** (published 2019-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ss-to-react
pnpm add ss-to-react
yarn add ss-to-react
bun add ss-to-react
```

Provides the command `ss-to-react`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-10-29 |
| First published | 2019-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Uncle Cheese |
| Maintainers | unclecheese |

## Links

- npm: https://www.npmjs.com/package/ss-to-react
- Repository: https://github.com/unclecheese/ss-to-react
- Homepage: https://github.com/unclecheese/ss-to-react#readme
- Issues: https://github.com/unclecheese/ss-to-react/issues
- npm.io page: https://npm.io/package/ss-to-react

## Dependencies (3)

- [glob](https://npm.io/package/glob.md) ^7.1.4
- [yargs](https://npm.io/package/yargs.md) ^14.2.0
- [htmltojsx](https://npm.io/package/htmltojsx.md) ^0.3.0

## Recent versions

- 0.0.1 (latest) — 2019-10-29

## README

## ss-to-react

Convert Silverstripe CMS `.ss` templates to React components.

### Usage

`$ ss-to-react <source-dir> <output-dir>`

### Examples

*app/templates/Includes/MyBlock.ss*
```html
<% if $Title || $Lead %>
    <section class="hero-block">
        <div class="container">
            <div class="row">
                <div class="col col-md-8 offset-md-2">
                    <% if $Title %>
                        <h1 class="hero-block__text hero-block__text--title">$Title</h1>
                    <% end_if %>

                    <% if $Lead %>
                        <p class="lead hero-block__text hero-block__text--lead">$Lead</p>
                    <% end_if %>
                </div>
            </div>
        </div>
    </section>
<% end_if %>
```

`$ ss-to-react app/templates/Includes/ my-react-app/components`

#### Output

*my-react-app/components/Includes/MyBlock.jsx*

```js
import React from 'react';

const MyBlock = () => {
    return (
		{/*  if $Title || $Lead  */}
		<section className="hero-block">
		  <div className="container">
		    <div className="row">
		      <div className="col col-md-8 offset-md-2">
		        {/*  if $Title  */}
		        <h1 className="hero-block__text hero-block__text--title">$Title</h1>
		        {/*  end_if  */}
		        {/*  if $Lead  */}
		        <p className="lead hero-block__text hero-block__text--lead">$Lead</p>
		        {/*  end_if  */}
		      </div>
		    </div>
		  </div>
		</section>
		{/*  end_if  */}
		
    );
};

export default MyBlock;
```

---
_Source: https://npm.io/package/ss-to-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._