{"id":13436461,"url":"https://github.com/jsdir/react-ladda","last_synced_at":"2025-04-04T08:03:56.888Z","repository":{"id":17242974,"uuid":"20012181","full_name":"jsdir/react-ladda","owner":"jsdir","description":"React wrapper for Ladda buttons.","archived":false,"fork":false,"pushed_at":"2019-10-03T08:23:41.000Z","size":80,"stargazers_count":294,"open_issues_count":12,"forks_count":48,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-04T21:38:36.330Z","etag":null,"topics":["javascript","ladda-buttons","react","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"piwik/piwik","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdir.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-21T07:32:33.000Z","updated_at":"2024-09-05T15:39:47.000Z","dependencies_parsed_at":"2022-07-21T19:48:33.401Z","dependency_job_id":null,"html_url":"https://github.com/jsdir/react-ladda","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdir%2Freact-ladda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdir%2Freact-ladda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdir%2Freact-ladda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdir%2Freact-ladda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdir","download_url":"https://codeload.github.com/jsdir/react-ladda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247141620,"owners_count":20890650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","ladda-buttons","react","reactjs"],"created_at":"2024-07-31T03:00:48.662Z","updated_at":"2025-04-04T08:03:56.852Z","avatar_url":"https://github.com/jsdir.png","language":"JavaScript","readme":"react-ladda\n===========\n\n[![Build Status](https://img.shields.io/travis/jsdir/react-ladda.svg?style=flat)](https://travis-ci.org/jsdir/react-ladda)\n[![Dependency Status](https://img.shields.io/david/jsdir/react-ladda.svg?style=flat)](https://david-dm.org/jsdir/react-ladda)\n[![NPM version](https://img.shields.io/npm/v/react-ladda.svg?style=flat)](https://www.npmjs.org/package/react-ladda)\n[![Code Climate](https://img.shields.io/codeclimate/github/jsdir/react-ladda.svg?style=flat)](https://codeclimate.com/github/jsdir/react-ladda)\n\nA React wrapper for [Ladda buttons](https://github.com/hakimel/Ladda). [Example](https://github.com/jsdir/react-ladda/blob/master/example/README.md)\n\n## Installation\n\n`react-ladda` can be installed directly through npm:\n\n```sh\n$ npm install --save react-ladda\n```\n\n## Usage\n\n`LaddaButton` is a React component that renders a [Ladda button](https://github.com/hakimel/Ladda). You can change the button's loading state and progress using the `loading` and `progress` props.\n\n```jsx\nimport React, { Component } from 'react';\n\nimport LaddaButton, { XL, SLIDE_UP } from 'react-ladda';\n\nclass App extends Component {\n\n  state = { loading: false };\n\n  toggle() {\n    this.setState({\n      loading: !this.state.loading,\n      progress: 0.5,\n    });\n  }\n\n  render() {\n    return (\n      \u003cLaddaButton\n        loading={this.state.loading}\n        onClick={this.toggle}\n        data-color=\"#eee\"\n        data-size={XL}\n        data-style={SLIDE_UP}\n        data-spinner-size={30}\n        data-spinner-color=\"#ddd\"\n        data-spinner-lines={12}\n      \u003e\n        Click Here!\n      \u003c/LaddaButton\u003e\n    );\n  }\n};\n\nReactDOM.render(\u003cApp /\u003e, document.body);\n```\n\nAlthough this package doesn't include the styles for the Ladda buttons, there are many different ways to include them. The easiest way is to add the following tag to your document:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.min.css\"\u003e\n```\n\n## Props\n\nAll of the native [Ladda button options](https://github.com/hakimel/Ladda#html) are supported through props:\n\nProp                 | Type      | Description\n-------------------- | --------- | -----------\n`loading`            | `boolean` | Displays the button's loading indicator\n`progress`           | `number`  | Number from 0.0 to 1.0\n`data-color`         | `string`  | Color applied to the button (`{green,red,blue,purple,mint}`)\n`data-size`          | `string`  | A [button size](#sizes)\n`data-style`         | `string`  | A [button style](#styles)\n`data-spinner-size`  | `number`  | Number representing the size of the spinner in pixels\n`data-spinner-color` | `string`  | Color applied to the spinner (eg. `#eee`)\n`data-spinner-lines` | `number`  | Number of spokes in the spinner\n\n## Sizes and Styles\n\nLadda comes with a variety of different [sizes and styles](http://lab.hakim.se/ladda/) that you can use. Button sizes and styles can be directly imported from `react-ladda`:\n\n```js\nimport LaddaButton, { XS, EXPAND_LEFT } from 'react-ladda'\n```\n\n### Sizes\n\n- `XS`\n- `S`\n- `L`\n- `XL`\n\n### Styles\n\n- `CONTRACT`\n- `CONTRACT_OVERLAY`\n- `EXPAND_LEFT`\n- `EXPAND_RIGHT`\n- `EXPAND_UP`\n- `EXPAND_DOWN`\n- `SLIDE_LEFT`\n- `SLIDE_RIGHT`\n- `SLIDE_UP`\n- `SLIDE_DOWN`\n- `ZOOM_IN`\n- `ZOOM_OUT`\n\n## Development\n\nAfter cloning and running `npm install`, you can use the following `npm` commands for easier development:\n\nCommand         | Description\n--------------- | -----------\n`npm test`      | Runs the test suite\n`npm run watch` | Runs the test suite and reruns when any source or test file changes\n`npm run lint`  | Lints both the source and test files\n`npm run build` | Compiles the source into ES5 and outputs the results into `dist`\n\n_Contributions are more than welcome!_\n","funding_links":[],"categories":["Uncategorized","Awesome React","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript"],"sub_categories":["Uncategorized","Tools","Loader"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdir%2Freact-ladda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdir%2Freact-ladda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdir%2Freact-ladda/lists"}