component-wall v1.0.7
Component Wall
A visual management tool for React/ React Native components. https://github.com/SeanChenU/component_wall
Example
Add comments with
@cpn-
prefix in your component .js file
Result
Why?
As the React/ React Native project getting larger, the components will soon become unmanageble. Usually requires developer spend extra hours on document. So we came up a more automatic way to manage them.
The component wall shows:
- name of the components class
- screenshots
- description
- tag
Usage (For now)
Install cpnwall
command line tool
npm install -g component-wall
Add these in component .js file
By adding the following comments with @cpn-
to your component .js file, it will automatically display on Component Wall.
Add
// @cpn-scr
for screenshot of componentAdd
// @cpn-des
for description of compoentAdd
// @cpn-tag
for tags of component (underconstruction)Note: for screenshot links, we use Evernote Skitch. It's a great tool for screenshots and notation. Also it can upload image to its cloud and generate link for it. Press
cmd + shift + 5
to start clipping screenshot and presscmd + /
to copy the image link. Make sure you select the 'Direct Image URL' option for image link copy.
Start it
Go to your project root directory or any folder that contains your component .js files
run
cpnwall
Open
http://localhost:7008
For more
If you have any idea or thoughts, feel free to say hi sean@appar.com.tw