Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @launchpadlab/lp-components with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var lpComponents = require("@launchpadlab/lp-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@launchpadlab/lp-components v3.25.1

Our Components

NPM version

lp-components

Reusable UI components for React apps.

Documentation

Documentation and usage info can be found in docs.md.

Migration Guides

Contribution

This package follows the Opex NPM package guidelines. Please refer to the linked document for information on contributing, testing and versioning.

Additional info

Size Limit

This library uses size-limit to prevent size bloat. The yarn size script is run in CI to check that the package size is under the limit specified in .size-limit.js. For a visualization of this package's relative dependency sizes, you can run yarn size --why.

React Storybook

This library uses React Storybook to render components in a development sandbox. In order to view the storybook, run yarn run storybook and navigate to the localhost port indicated.

Every new component added to this library should be accompanied by a new story in the storybook.

When pull requests are submitted, a Heroku review app will be deployed containing the revised storybook so that reviewers can view the changes made. When these changes are merged into master, the new storybook will be automatically deployed to http://lp-components.herokuapp.com.

DateInput styles

The DateInput component requires special styles in order to render correctly. These styles most be imported from the react-datepicker folder in node_modules and imported into your sass. To do this, make the following changes to your webpack.config.js and application.scss:

webpack.config.js:

Add a line near the top of the file specifying the path to the react-datepicker styles:

const datePickerPath = path.resolve(__dirname, '../node_modules/react-datepicker/src/stylesheets')

Then, add this path to the includePaths array of the sass loader:

{
    test: /.scss$/,
    loader: "sass",
    query: { includePaths: [ ... , datePickerPath ] }
}

application.scss:

Import the react-datepicker styles by adding this line:

@import "datepicker";

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free