parlor v0.1.5
parlor
A collection of tools for creating React and Next.js apps.
install
yarn add parlor
or npm i -S parlor
usage
Detailed examples can be found at the interplay.app repository.
syncRouting
Sync some routing on a single page app within _app.js
of a Next app.
...
import { syncRouting } from 'parlor';
import { matches, pages } from '../lib/routing';
...
class ReduxApp extends NextApp {
state = {
synced: false,
};
...
componentDidMount() {
syncRouting(matches, pages, () => this.setState({ synced: true }));
}
...
}
getCurrentPath
Get the current browser path in a cross-platform friendly way. Defaults to an empty string.
import { getCurrentPath } from 'parlor';
const currentPath = getCurrentPath();
getLocale
Get the current locale in a cross-platform friendly way. Defaults to en
.
import { getLocale } from 'parlor';
const locale = getLocale();
matchesGenerator
Generates matches that can be used for determining if a path matches a valid route.
const { matchesGenerator } = require('parlor');
exports.matches = matchesGenerator('/:page/:alpha');
next-server
A replacement for server.js
within a Next app that always renders the root page.
$ node node_modules/parlor/dist/next-server.js
spa-server-maker
Use to generate an SPA server that serves the build
directory's index.html
and static files. This is useful when running a server for E2E tests using Nightwatch.js.
const spaServerMaker = require('parlor/dist/spa-server-maker.js');
const appRoot = require('app-root-path');
const server = spaServerMaker(done, appRoot.toString());
server.close();
spa-server
Starts an SPA server using spa-server-maker
.
$ node node_modules/parlor/dist/spa-server.js
get-dimensions
Gets the window dimensions. If not on browser, returns 0
for each dimension.
import { getDimensions } from 'parlor';
const { width, height } = getDimensions();
dimensions-change-throttler
Function that can be used to throttle the window resize callback. Truthfully, it could be used to throttle anything.
import { dimensionsChangeThrottler } from 'parlor';
...
onDimensionsChange() {
throttledOnDimensionsChange(() => this.setState(getDimensions()));
}
DimensionsContext
Context provider for dimensions of page. Recommended to be used with some sort of throttling.
import { DimensionsContext } from 'parlor';
const App = () => (
<DimensionsContext.Provider value={{ height, width }}>
...
</DimensionsContext.Provider>
);
const SomeComponent = () => (
<DimensionsContext.Consumer>
{({ width }) => (
...
)}
</DimensionsContext.Consumer>
);
requirements
- Node 8 LTS
- Yarn 1.9.4
- Peer dependencies:
next
,react
commands
yarn
to install NPM packagesyarn prettier
to clean codeyarn eslint
to check code is cleanyarn ci
to run all continuous integration testsyarn babel
to convert code fromsrc
todist
yarn publisher
- to convert code and then start publishing
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago