open-index/open-npm huggingface dataset:
npm package: @reframe/crossroads
Description: Routing with [Crossroads.js](https://github.com/millermedeiros/crossroads.js).
Latest version: 0.3.2

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.






-->

Reframe + Crossroads = :heart:

# `@reframe/crossroads`

Routing with [Crossroads.js](https://github.com/millermedeiros/crossroads.js).

### Usage

Add `@reframe/crossroads` to your `reframe.config.js`:

~~~js
module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/crossroads')
    ]
};
~~~

### Example

~~~js
// /plugins/crossroads/example/reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/crossroads')
    ]
};
~~~

~~~sugarss
// /plugins/crossroads/example/pages/hello.config.js

import React from 'react';

const HelloPage = {
    route: '/hello/{name}',
    view: props => {
      const name = props.route.args.name;
      return <div>Hello {name}</div>;
    },
};

export default HelloPage;
~~~

~~~js
// /plugins/crossroads/example/pages/landing.config.js

import React from 'react';

export default {
    route: '/',
    view: () => (
        <div>
            <a href="/hello/lisa">/hello/lisa</a>
            <br/>
            <a href="/hello/jon">/hello/jon</a>
        </div>
    ),
};
~~~

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/crossroads/readme.template.md` instead.






-->
npm package: @reframe/koa
Description: Use Reframe with Koa.
Latest version: 0.3.2

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.






-->

# `@reframe/koa`

Use Reframe with Koa.

### Usage

Add `@reframe/koa` to your `reframe.config.js`:

~~~js
module.exports = {
  $plugins: [
    require('@reframe/react-kit'),
    require('@reframe/koa')
  ]
};
~~~

Then eject the server code:

~~~js
$ reframe eject server
~~~

### Example

Example of a reframe app with ejected Koa server code.

~~~js
// /plugins/koa/example/server/start.js

const Koa = require('koa')
const Router = require('koa-router');
const config = require('@brillout/reconfig').getConfig({configFileName: 'reframe.config.js'});
const {symbolSuccess, colorEmphasis} = require('@brillout/cli-theme');
const KoaAdapter = require('@universal-adapter/koa');

module.exports = start()

async function start () {
  const server = new Koa();

  server.listen(3000);

  server.use(
    // We use https://github.com/brillout/universal-adapter to integrate Reframe with Koa
    new KoaAdapter([
      // Run `$ reframe eject server-rendering` to eject the server rendering code
      config.ServerRendering,
      // Run `$ reframe eject server-assets` to eject the static asset serving code
      config.StaticAssets,
    ])
  );

  const router = new Router();
  router.get('/hello-from-koa', (ctx, next) => {
      ctx.body = 'Hello from Koa';
  });
  server.use(router.routes());

  const env = colorEmphasis(process.env.NODE_ENV||'development');
  console.log(symbolSuccess+'Server running (for '+env+')');

  return server
}
~~~

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/koa/readme.template.md` instead.






-->
npm package: @reframe/path-to-regexp
Description: Routing with [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp).
Latest version: 0.3.2

# `@reframe/path-to-regexp`

Routing with [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp).

Note that `@reframe/path-to-regexp` doesn't use the npm module `path-to-regexp` directly, but uses React Router's wrapper `react-router/matchPath`.

### Usage

~~~js
// reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/path-to-regexp') // npm install @reframe/path-to-regexp
    ]
};
~~~
npm package: @reframe/react
Description: Use Reframe with React.
Latest version: 0.3.2

Reframe + React = :heart:

# `@reframe/react`

Use Reframe with React.

### Usage

Add `@reframe/react` to your `reframe.config.js` and the `view` property of your page configs will be rendered with React.

Note that you don't need to add `@reframe/react` if you are using Reframe's React Kit [`@reframe/react-kit`](/react-kit).
The React Kit already includes this plugin.

~~~js
// reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react') // npm install @reframe/react
    ]
};
~~~
npm package: @reframe/react-kit
Description: The React-Kit includes: - [@reframe/react](/react) - [@reframe/path-to-regexp](/path-to-regexp) - And other things. (See the react kit's source code to see these things.)
Latest version: 0.3.2

Reframe's React-Kit

# `@reframe/react-kit`

The React-Kit includes:
 - [@reframe/react](/react)
 - [@reframe/path-to-regexp](/path-to-regexp)
 - And other things. (See the react kit's source code to see these things.)

### Usage

Add `@reframe/react-kit` to your `reframe.config.js`:

~~~js
// reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit') // npm install @reframe/react-kit
    ]
};
~~~
npm package: @reframe/react-native-web
Description: Implement views for the web and for native mobile using [React Native Web](https://github.com/necolas/react-native-web).
Latest version: 0.3.2

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.






-->

Reframe + React Native Web = :heart:

# `@reframe/react-native-web`

Implement views for the web and for native mobile using [React Native Web](https://github.com/necolas/react-native-web).

### Usage

Add `@reframe/react-native-web` to your `reframe.config.js`:

~~~js
module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/react-native-web') // npm install @reframe/react-native-web
    ]
};
~~~

### Example

~~~js
// /plugins/react-native-web/example/reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/react-native-web') // npm install @reframe/react-native-web
    ]
};
~~~

~~~js
// /plugins/react-native-web/example/pages/hello-native-web.config.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
    render() {
        return (
            <View style={styles.box}>
                <Text style={styles.text}>Hello from native web!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    box: { padding: 10 },
    text: { fontWeight: 'bold', color: 'green' },
});

export default {
    route: '/',
    view: App,
};
~~~

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-native-web/readme.template.md` instead.






-->
npm package: @reframe/react-router
Description: Use React Router's components.
Latest version: 0.3.2

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.






-->

Reframe + React Router v4 = :heart:

# `@reframe/react-router`

Use React Router's components.

### Usage

Add `@reframe/react-router` to your `reframe.config.js`:

~~~js
module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/react-router') // npm install @reframe/react-router
    ]
};
~~~

### Example

~~~js
// /plugins/react-router/example/reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/react-router') // npm install @reframe/react-router
    ]
};
~~~

~~~js
// /plugins/react-router/example/pages/spa-page.config.js

import React from 'react';
import {Link, Route} from "react-router-dom";

const App = () => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>
    <hr />
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const pageConfig = {
  route: '/:params*',
  view: App,
};

export default pageConfig;
~~~

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/react-router/readme.template.md` instead.






-->
npm package: @reframe/vue
Description: Use Reframe with Vue.
Latest version: 0.3.2

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.






-->

Reframe + Vue = :heart:

# `@reframe/vue`

Use Reframe with Vue.

### Usage

Add `@reframe/vue` to your `reframe.config.js`:

~~~js
module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/vue') // npm install @reframe/vue
    ],
};
~~~

### Example

~~~js
// /plugins/vue/example/reframe.config.js

module.exports = {
    $plugins: [
        require('@reframe/react-kit'),
        require('@reframe/vue') // npm install @reframe/vue
    ],
};
~~~

~~~js
// /plugins/vue/example/pages/vue-welcome.config.js

import Vue from 'vue';

const app = new Vue({
    render: createElement => createElement('div', 'Hello from Vue'),
});

export default {
    route: '/',
    view: app,
};
~~~

<!---






    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.












    WARNING, READ THIS.
    This is a computed file. Do not edit.
    Edit `/plugins/vue/readme.template.md` instead.






-->