React Components for Recipe Apps
A library of React components created for an online recipe app.
The system for displaying components is based on Cory House’s courseCreating Reusable React Components on Pluralsight.
npm install recipe-components
To import into your own app, after you install, just import the individual components as you would any Node module.
ES6 style import
import Table from 'recipe-components/Table'; import TableHeader from 'recipe-components/TableHeader'; import TableBody from 'recipe-components/TableBody';
Node style require
const Table = require('recipe-components/Table').default; const TableHeader = require('recipe-components/TableHeader').default; const TableBody = require('recipe-components/TableBody').default;
Importing styled vs. unstyled versions of a component
The components come with some basic styling set by a matching CSS file in each component folder. (E.g., the
Card.js file has a matching
You can override any of the styles you see fit. However, if you wish to import a component without any styles, just import add the filename for the component to the end of your import statement, like this.
import Table from 'recipe-components/Table/Table';
This is possible because each component is imported into an
index.js file in its own directory, along with an import of its matching style file, and then re-exported. This makes the styled import look a little cleaner, and it allows you to import just the unstyled component if you wish.
See the online component documentation, for code examples and a list of props for each component.
You can fork this repo, and expand it for your own needs, or just use it as a base for your own component library.
After you fork it, to get all the development dependencies, be sure to run
To run the test suite,