Anyfin UI component library


5.4.355 months ago4 years agoMinified + gzip package size for @anyfin/ui in KB



npm latest package




UI Components is a collection of React components for building web interfaces.



@anyfin/ui is available as an npm package and can be installed on any React web project.

yarn add @anyfin/ui

Use Case: create new components in storybook

  • Run Storybook on a separate terminal using yarn storybook

Open http://localhost:6006 with your browser to see Storybook and the list of component stories.

You can start modifying the components, and they will update automatically in Storybook to reflect the changes. If you change the functionality of any component (e.g., removing or adding props) don't forget to update the component's stories and documentation to reflect those changes.

Use Case: Develop in sync with web or mypages

  • Run the build in watch mode using yarn dev and link this package to web or mypages.

If you are working on the web or mypages project, sometimes you want to modify some @anyfin/ui components and see them update on that project as well. You can achieve this by running the following commands. in the ui-components repository, run: yarn link.

Then, in the web/mypages directory run yarn link @anyfin/ui. Now the component set is linked to code in the web/mypages directory which means they should update.

Don't forget to run dev mode (yarn dev) in this repository and the one you have linked this one against (e.g. web or mypages).

Publishing new versions

@anyfin/ui is available as an npm package. You will need access to the npm organization in order to publish new versions of this package.

Using Github

Make sure to include the version bump in package.json in your PR, if your changes are merged in master go to "Releases" -> Draft a new release. Here, you can create the "release" that will be published to npm. By default this should be the latest master (with your changes included).

Using a CLI

To publish a new version, run yarn version to create new tags and yarn publish to publish these to npm. This package follows semver versioning.

Updating storybook

A merge in master will automatically update the only storybook.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.