https://github.com/idered/react-preset

⚛ Smash your props into single preset prop
https://github.com/idered/react-preset

props react

Last synced: 14 days ago
JSON representation

⚛ Smash your props into single preset prop

• Host: GitHub
• URL: https://github.com/idered/react-preset
• Owner: Idered
• License: mit
• Created: 2020-05-09T14:18:01.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T19:56:18.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T03:43:00.121Z (about 1 month ago)
• Topics: props, react
• Language: TypeScript
• Homepage: https://codesandbox.io/s/react-preset-tphq6
• Size: 316 KB
• Stars: 5
• Watchers: 4
• Forks: 1
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React Preset



  

  

  



Smash your props into single `preset` prop.




  



![](.github/example.png)

## Quick start

```sh

npm install react-preset

```

1.  Create preset object and extend TypeScript definitions:

```tsx

// preset.tsx

const preset = {

  // Preset group name

  button: {

    // Single preset

    save: {

      // These props should be handled by component

      children: 'Save',

      appearance: 'primary'

    },

    cancel: {

      children: 'Cancel',

      appearance: 'minimal'

    }

  }

}

declare module 'react-preset' {

  export interface DefaultPreset extends Required {}

}

export default preset

```

2. Wrap your App component with preset provider

```tsx

// App.tsx

import {PresetContext} from 'react-preset'

import Button from './Button'

import preset from './preset'

const App = () => (

  

    

    

  

);

```

3. Wrap your component with `withPreset`

```jsx

// Button.tsx

import * as React from 'react'

import {withPreset} from 'react-preset'

type Props = {

  appearance: 'minimal' | 'primary'

}

const Button: React.FC = (props) => 

export default withPreset('button')(Button)

```

Check [example directory]('./example) to learn more.

## API

### `PresetContext`

Used to provide presets to components.

```tsx

  

```

### `usePreset`

Hook used to get access to all presets inside component.

```tsx

const MyComponent = () => {

  const presets = usePreset()

  // presets.button.save

}

```

### `withPreset(groupName)(component)`

Apply preset to component.

```tsx

const Card = () => 


export default withPreset('card')(Card)

```